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="" は、無視されますので削除しても問題ありません。

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

	HTML＆CSS
	2019.07.06 07:05
	2019.07.12 07:06

Related entry

Pickup entry

• BACK
• NEXT