PC活用術
パソコンを有効活用するための情報・自作PCパーツ情報・フリーソフト紹介解説。
大手レビューサイトとは違い、皆さんのお財布にやさしい情報発信をテーマにしています。
TOP > HTML/CSS/JS サイトの小技 > Youtube の埋め込み動画をアスペクト比を保ってでウィンドウ幅に合わせて可変させる方法

Youtube の埋め込み動画をアスペクト比を保ってでウィンドウ幅に合わせて可変させる方法

Youtube

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

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

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

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

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

<iframe width="460" height="259" src="//www.youtube.com/embed/●●●?rel=0&wmode=transparent"></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 で選択した埋め込みコードの動画の幅が 700px に設定されているとして、親ブロックの幅がそれ以上の幅だった場合は自動で拡大し、それ以下だった場合は自動で縮小して表示されます。
表示後のサイズの変更にも対応し、余白なども自動調整されます。

貼り付けタグをブロックで囲み、ブロックと iframe の両方を CSS で調整します。
ここではブロック要素のクラス名を「player」としています。

HTML

CSS

オリジナルサイズに調整の際などにアスペクト比とサイズを計算する際には、こちらの計算ツールをお気に入り登録し御利用下さい。
https://helpsupport.blog.fc2.com/blog-entry-106.html

rss1 hatena Tweet facebook googleplus Line

コメント

◀ NEWTOP ▲ 400 ▲ 400 ▼ OLD ▶
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。