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

1250-01

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

スポンサーリンク

HTML

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

<div class="youtube-wrapper">
     <!-- 埋め込みコード(iframe) -->
</div>

CSS

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

.youtube-wrapper {
    position: relative;
    padding-top: 56.25%;  /* 動画の縦横比 */
    padding-bottom: 30px; /* スライダー部分用スペース */
    overflow: hidden;
}
.youtube-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

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

補足

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

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

埋め込み例

参考

コメントを残す

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

CAPTCHA