Youtube動画をレスポンシブで埋め込むcss設定方法

YouTube_umekomi_eye

Youtubeの動画をブログに埋め込むとき、今まではサイズを固定する方法でした。
画面の大きさに合わせて、動画のサイズも自動で変更するようにCSSを追加しました。

Youtube動画の埋め込み

Youtubeの動画を埋め込む時は、通常埋め込みたい動画の画面から共有用のコードを取得します。

YouTube_umekomicode
このまま貼り付けても動画再生可能ですが、貼り付けサイズが固定されていますので、スマホやブラウザのサイズによっては、レイアウトがはみ出てしまいます。

スマホなどさまざまな画面サイズに合わせて、自動でリサイズしてくれるCSSを設定しました。

CSSコードを追加する

Seesaaブログの管理画面から、[デザイン]→[デザイン設定]→[自分の使っているCSS名]をクリックして編集画面を開きます。

次のコードを追加します。クラス名は、自分で分かりやすいものに変更して使ってください。

/* 動画埋め込み */
.movie-wrap {
width: 500px;
max-width: 100%;
}
.movie-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.movie-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

[.movie-wrap]で全体の最大幅を指定しています。最大幅を指定せず、完全可変させたい場合は、削除してください。

記事中の埋め込みコード記述法

記事中に埋め込むコードは、divタグにクラス指定をして使います。

<div class="movie-wrap">
  <div class="movie-container">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/FlKVzLe-vys" frameborder="0" allowfullscreen></iframe>
  </div>
</div>

このコードで埋め込んだ動画がこちら ↓

PCブラウザでもスマホで見てもリサイズされて綺麗に見れます。

まとめ

え~設定しては見ましたが、よく考えたら自分のサイトを、まだレスポンシブ化してないので、あまり意味はなかったような気がします^^;

HTMLやCSSの勉強をして、少しずつデザイン変更やテクニック的なことも覚えているので、レスポンシブ化も将来的には実践していきたいですね。

スポンサーリンク







シェアする

フォローする