harappa Office

大阪府堺市を中心に中小企業、個人事業主のみなさまのウェブマーケティング支援を行っています

ウェブやブログにyoutubeなどの動画を貼付ける時、はみださないようにするレスポンシブ的な方法。

      2013/11/03


photo by LimarieC

世の中はGWのようです。わたしのまわりに「海外行くんだー」とか「実家帰るんだー」って人が少ないのでまったく実感が無いです。

今日は特にツカミネタ無し。harappa岡本です。

デザイナーとかコーダーとかプログラマーとか名乗ったことはまったく無いですが、自分のサイトのことは自分でしないといけないので、たまにいじります。今回は動画貼付けのお話。

このサイトはWordpressのレスポンシブテーマを利用しています。

レスポンシブって何?おいしいの?って方もいると思います。そんなの常識。っていうかアレはアレで微妙よね。とか思ってる人はこの先読まなくていいです。レスポンシブというのは、ザクッといっちゃうと、PC向け、スマホ向けと別々のサイトを作らずとも、一つのサイトでPCもスマホもキレイに見えちゃいますっていうウェブサイトの作り方。

もうちょい具体的にすると、サイトにアクセスしたブラウザの横幅を検知して、サイトのレイアウトをブラウザの横幅に合うように組み替えるという作り方。

その筋をガリガリやってらっしゃる作り手の方たちからすれば、乱暴な説明なのかもしれませんが、そういうことができるWordpressのテーマを使わせてもらってます。

埋め込んだYoutube動画がスマホビューで画面からはみ出る。

そんな次世代っぽいものを利用してサイトができているワケですが、あくまで本職の方がつくったテーマをそのまま使わせてもらっているだけ(無料で配布されてます。誰でも利用できます)で、いじればいじるほど元の動作をしないことも多々あります。

Youtubeの動画貼付けもその一つ。Youtubeってのは動画をブログなどに貼付けるために、htmlコードを用意してくれていますよね。

これをそのまま記事やページにコピペすれば動画が貼付けられるんだけど、もちろんこいつは「レスポンシブ」じゃありません。PCで見ても、スマホで見ても、縦横のサイズは固定されています。もちろん上の埋め込みコードはPCで見やすいサイズになってるので、スマホで見ると、ガッバーっとはみ出てしまいます。はみ出たスクリーンショット無くてごめんなさい。はみ出るんです。

CSSにちょちょっと書き加えてから、貼付ける時に一手間かける。

なんだか料理教室みたいな小見出しですね。やり方としては常に横幅100%にする、みたいなやり方だと思います。すみません細かいことを言葉で説明できるほど基礎知識がありませんわ。

ほんとこのまんまやっただけなんで、本家を参考にしてください。

まずCSSに以下を追記します。

[css]
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
[/css]

で動画を埋め込む時に以下のような書き方をしてください。

[html]
<div class="video-container">
<!– ここにYouTubeやVimeoの埋め込みコード –>
</div>
[/html]

そのまま書いてもOKですし、class要素を任意に書き換えてもOKです。ようはCSSに必要なことを書いて、記事を書くときにCSSが適用されるように当該class要素のdivでくくってやる。たったそれだけ。

一手間かけてあげるって、たいせつなこと、ですねぇ。

この記事を書いた人

harappa 岡本
harappa 岡本harappa 代表/Web解析士/愛玩動物飼養管理士
1980年大阪府堺市生まれ
広告・ウェブ制作ディレクター、プロデューサーを経て、2012年harappaとして活動開始。紙媒体、ウェブ媒体問わず、企画、要件定義、プロジェクトマネジメント、制作に関わるひととおりのディレクション、プロデュースの実務。ウェブサイトのアクセス解析、ヒューリスティック分析など調査実務、最近ではSNS運用やウェブに関連する講師もやっています。
もうちょっと詳しい自己紹介はこちら。
facebookページでは裏話なんかも。

 - お役立ち, ウェブテクニック, ブログ

  関連記事

Webライティングサマージャムの途中経過と、まわりのちょっとした変化

photo by harappa (Canon EOS 70D) そうなんです( …

ヨメのつけまつける3段活用が時を超えた瞬間。

photo by JefferyTurner どうせGWなので、誰も見てないと思 …

大阪のウェブコンサル・コンサルティングってどうなのよ。ちょっとGoogle先生に聞いてみた。

photo by goingslo 今年は桜が散るタイミングに差がありませんか? …

鬼速PDCAを鬼速で試してみた結果!

photo credit: Ukelens Fasnachtsumzug Keh …

ウェブサイト制作の見積りをチェックするポイント6つ

photo by Abode of Chaos 暑い。2013年、関西圏では8〜 …

[WordPress]こんな零細ウェブサイトでもブルートフォースアタックされたので警告と対策

photo by Angelo González 暑いっすね。暦のうえではもう秋 …

釣れるかな。不安です。
「ウェブサイトどうしよう?」漠然とした不安を解消する3つのポイント

by robeposse [flickr] 今日は僕のこれまでの制作サイドの経験 …

ウェブサイトのアクセス解析を簡単にやってみた。2014年7月版。

photo by Luke,Ma ワールドカップも終わり、PLの花火も終わり、気 …

WordPressのメンテナンスモードから復帰させる方法

photo by stevendepolo どうも日曜日のharappa岡本です …

iPhoneの画面が浮いた!ホバリングするドローンでも、オスプレイでもないよ!

By: @sage_solar – CC BY 2.0 iPhone …