Smallville

smallville

Bootstrapでyoutubeの動画をレスポンシブに表示するためのCSS

CSS

youtube

Bootstrapを使用したWebサイトでyoutubeの動画をレスポンシブで表示するためのCSSを紹介します。

HTMLの記述

まずはHTMLの記述です。iflameタグで動画を囲み、さらにdivタグで囲みます。この時にdivにクラス名をつけましょう。今回はvideo-wrapというクラス名をつけました。

<div class="video-wrap">
<iflame>
ここにyoutubeなど動画のアドレスを記述する
</iflame>
</div>

CSSの記述

つぎにCSSの記述です。クラス名video-wrapというclass名をつけてみました。下記CSSは、コピペでかまいません。

.video-wrap {
  position: relative;
  margin-top: 1.2em;
  margin-bottom: 1.2em;
  padding-top: 69px;
  padding-bottom: 50%;
  overflow: hidden;
}
.video-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

すると、こんな感じになります。

レスポンシブyoutube動画サンプル

これでyoutubeの動画がレスポンシブで表示されました。




スポンサーリンク