YouTubeの埋め込み動画のサイズを画面に合わせる方法

1250-01

YouTube動画の埋め込みコードはサイズを指定できますが、固定サイズなのでスマートフォンで表示した場合にはみ出てしまうことがあります。そこで今回は、埋め込んだYouTube動画のサイズを画面に合わせて表示する方法を紹介します。

スポンサーリンク

HTML

HTMLでは、埋め込みコード(iframe要素)をdiv要素で囲みます。

CSS

CSSは以下のように設定します。

これで、埋め込んだYouTubeの動画が、iframeを囲ったdivの親要素の横幅に合わせて表示されるようになります。

補足

縦横比は、埋め込みコードを取得する時に選択肢に出てくるサイズから算出したものです(例:315 ÷ 560 = 56.25%)。

スライダー部分用スペースの padding-top を0にすると、再生時にスライダーが自動で隠れます。このあたりはお好みで。

埋め込み例

参考

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*