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