話題の人物YouTubeまとめ&雑記雑感雑多ログ

Youtube(iframe)をレスポンシブ対応で掲載する

Youtube動画を埋め込む際、スマホでも再生できるように「iframeタグ」を使用することが主流になっている。

さらには、WebのアクセスはスマホユーザーがPCを上回ってきた現状では、スマホ対応のため「レスポンシブウェブデザイン」は必須条件となってきた。

そのため、Youtube埋め込み動画の「iframe」もレスポンシブになるように、簡単なCSSとHTMLにクラスを追加するおぼえがき。

<style>
p.video{
position:relative;
height:0;
padding:0 0 56.25%;
overflow:hidden;
}
p.video iframe{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
</style>
<p class="video">
<iframe width="560" height="315" src="//www.youtube.com/embed/***" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
</p>

投稿エディタ(TinyMCE)では、iframeを張り付けると、自動的に「pタグ」が付与されることから、iframeを囲う「pタグ」にクラス(class="video")を追加するだけで可能となる。

ちなみに、iframeのwidth="" height="" 無視されるので削除してもOK!

The trick is very simple. You need to wrap the embed code with a <div> container and specify 50% to 60% padding bottom. Then specify the child elements (iframe, object embed) 100% width, 100% height, with absolute position. This will force the embed elements to expand fullwidth automatically.

Elastic Videos

関連記事

横幅いっぱい(ピッタリ)に要素を並べるCSS(もちろんレスポンシブで…) 2018.05.01 CSSで文字列を省略して文末に『…』を付ける。さらにテーブル(セル)にも適用させる方法 2018.05.01

雑記雑感雑多ログ

タイ・シルバーの新芽2本目を確認 2018.05.12 画像遅延スクリプト「echo.js」でページ表示の体感速度を上げる。 2018.05.11 格闘技イベント「RIZIN」での衝撃KOシーン!堀口恭司vsイアン・マッコール 2018.05.09 広告収入で賄う無料タクシー「nommoc/ノモック」とは!? 2018.05.08 これって…そのためのTシャツ!?ポケットティッシュをスマートに出せるアイデアTシャツ 2018.05.07 ゴールデンウィーク明けの仮想通貨動向 2018.05.07 プロレスの登場シーンをかっこ良く決めるつもりが、張り切り過ぎてしまった結果・・・ズッコケ名シーン。 2018.05.05 新サイト「CCindex/仮想通貨・暗号通貨まとめ」リリース! 2018.05.04 指定ディレクトリ(フォルダ)内の画像ファイルを抽出してランダム(重複なし)に表示させる最短コード 2018.05.01 最低覚えておきたいチャートの見方 2018.05.01