コード
埋め込みダグ
YouTubeなら動画の埋め込みタグなら、このように取得できます。このとき動画のサイズを決めますので、このままウェブサイトやブログに貼るとサイズが固定されてしまいます。これをcssで常に貼った場所いっぱいに広がるようにすれば、タブレットでもスマホでも見やすくなります。
ただし、画質の粗い動画だと広がることによって、逆に見づらくなることがありますので、注意が必要です。
html
<div class="movie">
<iframe width="560" height="315" src="https://www.youtube.com/embed/pYb3w5lQ3TQ" frameborder="0" allowfullscreen></iframe>
</div>
css
.movie {
position: relative;
width: 100%;
padding-top: 56.25%;
}
.movie iframe {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
iframeタグに可変する枠
div.movieをつけて、その中でiframeを100％表示させます。padding-top: 56.25%;としているのは、HD動画のアスペクト比が16:9なので、16:9 = 100％:56.25％ 100％の幅に対して100％x9/16 = 56.25％ となります。異なるアスペクト比の場合、
56.25%を計算し直せば対応可能です。ちなみに
height: 56.25%;は効きません。要素の大きさを比率でコントロールしたいときはpaddingを使います。cssの効果
別記事でいつもお世話になっている埋め込み動画で試してみます。
誰でもできる！ニンテンドー3DSの充電コネクタの交換修理！ | ウェブソク
div.movieなし
PCならブラウザの大きさを変えてみて下さい。サイズが固定されているため、小さくするとはみ出ると思います。
div.movieあり
ブラウザの大きさを変えても、常に幅いっぱいに表示されます。
まとめ
この要素の比率を固定する方法は、埋め込み動画だけではなく、レスポンシブのウェブサイトを作るときにいろいろ使えます。cssで要素の比率、主に高さをコントロールできるのは助かりますね！
ブログに埋め込んだYouTubeは少しの追記で高画質になる！ | ウェブソク
