youtube AIP 画面幅に対して違う動画を表示するようにする レスポンシブ

Javascript

youtubeでサイトにjavascriptAPIを使用して動画を埋め込むことがあります。

(基本的な使い方はこちら youtube>iframe 組み込みの YouTube Player API リファレンス

そんな時レスポンシブを考えるとどうしても比率がおかしくなってしまうこともあるでしょう。

画面幅でサイズを変えることは簡単ですが、高さも変わってしまうと小さくなりすぎてしまうこともあります。

そこで画面幅で違う動画を読み込むように、youtubeに比率の違う動画をアップロードしてそれぞれ読み込むようにしてみました。要するに2つのyoutube動画をレスポンシブで切り替えるということです。

デモページ

スポンサーリンク

HTML

まずはjavascriptでiframeを書き出すHTMLを作成します。

<div id=”player”></div>がそうです。

CSS

CSSは画面幅によってインナーのサイズを変えます。

ブレークポイントはjavascriptと合わせます。

ついでにふわっと切り替わるアニメーションも入れてみました。

 

JS

基本的なソースに一部を足しています。
何をしているかというと画面サイズが切り替わったら幅を判定して、現在の動画IDと比較して違ったら動画IDを変えて読み込みなおすという作業です。
リサイズのたびにチェックしてしまいますが致し方ありません。
また、リサイズのたびに読み込んでしまうと負荷がかかるのでブレークポイントをまたいだ時だけ処理をします。
各読み方の設定も入れています。
今回は自動再生でループをする設定にしています。(無音設定です)
尚、srcを書き換える処理を入れていますが必要ないケースもあります。
複数のyoutubeに対応していませんので複数掲載する場合は①と②を消すか他の対処を入れてください。

コメント

タイトルとURLをコピーしました