スポンサーリンク

Youtubeの埋め込み動画をCSSでウィンドウ幅に合わせて可変させる方法

Youtube

Youtube の動画をサイトに埋め込む際に CSS だけで動画サイズを自動で可変させ、ウィンドウ幅にプレイヤー幅を合わせる方法を紹介します。

筆者はサイトが重くなることが嫌いなため、極力 CSS と JS の記述を減らしたい人間なので、世間一般に使われている手法とは全く違う方法で制御しています。
独自でやってる手法は CSS にたった一行追記するだけです。

設置例はこの様になります。

当サイトの設置では、最大幅 460px 最小幅 300px となっております。
最小幅はスマートフォンでの表示の際に、メインコンテンツが余白を計算しても 300px 以下にならないレイアウトであるため自動的にそうなっています。
最大幅は設定しなければレイアウトの方で計算され 640px まで拡大するのですが、個人的にそこまで大きくしたくないため、スマートフォンの横向き 480px と余白を計算し 460px に設定しています。
つまりプレイヤーは幅 300px から 460px まで、画面にあわせて自動調整されます。

では設置方法を紹介します。
HTML では貼り付けたい箇所に次のタグを入力します。

<iframe width="460" height="259" src="//www.youtube.com/embed/●●●?rel=0&wmode=transparent" frameborder="0"></iframe>

●●●の部分に自分が貼り付けたい動画の ID を入力します。
例の動画の場合ページの URL は次のようになっています。
https://www.youtube.com/watch?v=f7u9uP__b0Q
この f7u9uP__b0Q の部分が ID です。

CSS には次の一行を追加します。

iframe[src*="youtube.com"]{width:100%;max-width:460px;}

貼り付けたブロックの最大幅まで拡大したければ max-width:460px; の記述を削除します。
最大幅を変更したければ max-width:640px; などと変更して下さい。
注意点としては、HTML に貼り付けるタグで指定する幅と、CSS で指定する max-width の数値を揃えることです。

この方法では表示してから拡大縮小した場合に余白が出来たりなどの弱点はありますが、ブラウザサイズ変更後にリロードすればそのサイズにあったプレイヤーになります。
しかしその様な使い方をする人はまず居ないので、最初に表示したサイズに合わせて自動調整されれば十分かと思います。
もしそれらの余白まで徹底して自動調整したければ、コードの記述量が一気に増えてサイトが重くなりデメリットの方が圧倒的に多いですが次の方法を使うと良いでしょう。

プレイヤーの性能のみに拘るならこちら

Youtube で選択した埋め込みコードの動画の幅が 640px に設定されているとして、親ブロックの幅がそれ以上の幅だった場合は自動で拡大し、それ以下だった場合は自動で縮小して表示されます。
表示後のサイズの変更にも対応し、余白なども自動調整されます。

HTML

<div class="movie">
<div class="youtube">
<iframe width="640" height="360" src="//www.youtube.com/embed/f7u9uP__b0Q?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>

CSS

.movie {
max-width:100%;
}

.youtube {
position:relative;
height:0;
padding-top:33px;
padding-bottom:55%;
overflow:hidden;
}

.youtube iframe {
position:absolute;top:0;left:0;
width:100%;
height:100%;
}

埋め込みたい動画の埋め込みコードを入力。
サイトに合った好みの最大幅を指定。


筆者のスタイルを使われる際には、自分で普段貼り付けるサイズのタグをテキストなどに保管しておき、コピペで使うと便利です。
またコードは最近の動画で 4:3 はまず無いと思われますが、16:9 と 4:3 の2バージョン作っておくと良いでしょう。
アスペクト比とサイズを計算する際にはこちらの計算ツールをお気に入り登録し御利用下さい。
http://helpsupport.blog.fc2.com/blog-entry-106.html

スポンサーリンク
sns1 RSS Feedly はてな Line Tweet FaceBook sns2 Follow Follow none none none none
スポンサーリンク

コメント

_____________________________________________________________________________________________________
net PV
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。