YouTubeの動画をレスポンシブに対応させて貼り付けて見ました。
- Date：
- Category：Javascript
- Tags：Javascript, YouTube
- Response：Comments 0
-
会社紹介の動画をホームページに貼り付けたり、個人のブログでYouTubeの動画を紹介したりしたい時があると思います。
でもただ単に貼り付けるだけだと、スマホで見た時に、画面内に収まらず見きれていたりして格好悪くなっているサイトとか結構あったりします。
別でスマホページを用意している場合は良いかもしれませんが、メディアクエリ等でいろんなブラウザサイズに対応させている場合は困ります。
そんな時に役たつ、YouTubeの設置方法をメモしておきます。
YouTube Player API で設置します。
いつも自分がYouTubeを設置する時のソースを記載します。
また、IE7以下では動作しないようなので注意です。
“エンドユーザーは HTML5 の postMessage をサポートするブラウザを使用する必要があります。最新のブラウザは postMessage をサポートしていますが、Internet Explorer 7 ではサポートされていません。”
参照元：iframe 組み込みの YouTube Player API リファレンス
まず、YouTubeを設置したい箇所に下記HTMLを書きます。
|
1 |
<div id="player"></div> |
その次に下記Jsのコードを</body>直前に書きます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<script type="text/javascript"> //YouTube Player API を読み込みます。 var tag = document.createElement('script'); tag.src = "https://www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); var player; function onYouTubeIframeAPIReady() { player = new YT.Player("player", { //"player"の箇所がHTMLのID名を指定 width : "640", //動画の横幅 height : "360", //動画の縦幅 videoId : "M7lc1UVf-VE", //動画のID（URLの「v=〇〇〇〇」の〇〇〇〇部分） wmode: 'transparent', events: { 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange }, playerVars: { 'loop': 0, 'rel': 0, 'showinfo': 0 } }); } function onPlayerReady(event) { } function onPlayerStateChange(event) { } </script> |
14行目から下は、わからなければそのままで良いです。
ちなみに、playerVars を変えたり追加したりすると、色々細かい設定も出来ます。
設定の内容を細かく知りたい場合は、リファレンスを参照してください。
iframe 組み込みの YouTube Player API リファレンス
これで、ページにYouTubeの動画が表示出来るようになりました。
でも、これだけだと、サイズが640×360px固定で表示されてしまうので、ここから少しだけ、HTMLとCSSに手を加えていきます。
埋め込んだYouTube の動画をレスポンシブ対応にします。
まず、先ほど書いたHTMLを下記の用の変更します。
|
1 2 3 4 5 |
<div id="youtube-movie"> <div id="youtube-movie-content" > <div id="player"></div> </div> </div> |
次に下記CSSを追加します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
#youtube-movie { margin: 0 auto; width: 100%; max-width: 640px; /* 最大の横幅 */ } #youtube-movie-content { padding-top: 56.25%; position: relative; width: 100%; } #youtube-movie-content iframe { height: 100% !important; left: 0; position: absolute; top: 0; width: 100% !important; } |
これでブラウザの横幅を変えると、それによってYouTubeの動画サイズも変わっていきます。
上記を設定したサンプル動画
cssで最大の横幅を640pxに指定しているので、それ以上は大きなりませんが、それ以下では、100%の横幅になります。
max-widthを消せば常に横幅100%も可能です。
コメントを残す