Youtubeの動画をブログに埋め込むとき、今まではサイズを固定する方法でした。
画面の大きさに合わせて、動画のサイズも自動で変更するようにレスポンシブCSSを追加しました。
もくじ
Youtube動画の埋め込み
Youtubeの動画を埋め込む時は、通常埋め込みたい動画の画面から共有用のコードを取得します。
このまま貼り付けても動画再生可能ですが、貼り付けサイズが固定されていますので、スマホやブラウザのサイズによっては、はみ出てしまいます。
スマホなどさまざまな画面サイズに合わせて、自動でリサイズしてくれる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の勉強をして、少しずつデザイン変更やテクニック的なことも覚えているので、レスポンシブ化も将来的には実践していきたいですね。
