[み]埋め込み動画もレスポンシブに!ブラウザのサイズに合わせて動画のサイズもリサイズする方法

YouTubeとかVimeoとかの動画をレスポンシブなWebサイトに埋め込んだ場合、せっかくなのでこの埋め込み動画もレスポンシブにリサイズしてほしいですよね。それを実装する方法を紹介します。

ブラウザのサイズに合わせて埋め込み動画もリサイズする方法

YouTubeやVimeoのような埋め込み動画のレスポンシブ対応は、HTMLとCSSを次のように書いてやると実装できます。HTMLは動画を表示させるiframeをdiv要素で囲み、CSSはdivとiframeそれぞれにスタイルを指定します。

html

<div class="video">
    <iframe width="960" height="540" src="https://www.youtube.com/embed/wPYCDn8EvUE" frameborder="0" allowfullscreen></iframe>
</div>

CSS

.video {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    text-align: center;
}

.video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

レスポンシブな埋め込み動画のデモ

こちらのサイトで埋め込み動画をレスポンシブ対応にしています。
newtab 懸賞金1080万円 ストライド メガミステリー ラストの解法

シェアありがとうございます

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

commentYour Message

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

checkboxみはら.comはエックスサーバーです

PAGE TOP arrowup