スマホメニュー

YouTubeの動画をレスポンシブに対応させて貼り付けて見ました。

会社紹介の動画をホームページに貼り付けたり、個人のブログでYouTubeの動画を紹介したりしたい時があると思います。
でもただ単に貼り付けるだけだと、スマホで見た時に、画面内に収まらず見きれていたりして格好悪くなっているサイトとか結構あったりします。
別でスマホページを用意している場合は良いかもしれませんが、メディアクエリ等でいろんなブラウザサイズに対応させている場合は困ります。
そんな時に役たつ、YouTubeの設置方法をメモしておきます。

YouTube Player API で設置します。

いつも自分がYouTubeを設置する時のソースを記載します。
また、IE7以下では動作しないようなので注意です。

“エンドユーザーは HTML5 の postMessage をサポートするブラウザを使用する必要があります。最新のブラウザは postMessage をサポートしていますが、Internet Explorer 7 ではサポートされていません。”
参照元:iframe 組み込みの YouTube Player API リファレンス

まず、YouTubeを設置したい箇所に下記HTMLを書きます。

その次に下記Jsのコードを</body>直前に書きます。

14行目から下は、わからなければそのままで良いです。
ちなみに、playerVars を変えたり追加したりすると、色々細かい設定も出来ます。
設定の内容を細かく知りたい場合は、リファレンスを参照してください。
iframe 組み込みの YouTube Player API リファレンス

これで、ページにYouTubeの動画が表示出来るようになりました。
でも、これだけだと、サイズが640×360px固定で表示されてしまうので、ここから少しだけ、HTMLとCSSに手を加えていきます。

埋め込んだYouTube の動画をレスポンシブ対応にします。

まず、先ほど書いたHTMLを下記の用の変更します。

次に下記CSSを追加します。

これでブラウザの横幅を変えると、それによってYouTubeの動画サイズも変わっていきます。

上記を設定したサンプル動画

cssで最大の横幅を640pxに指定しているので、それ以上は大きなりませんが、それ以下では、100%の横幅になります。
max-widthを消せば常に横幅100%も可能です。

コメントを残す

メールアドレスが公開されることはありません。

Advertising

最近の記事

アーカイブ

Advertising

Advertising

カレンダー

2017年11月
« 10月    
 1234
567891011
12131415161718
19202122232425
2627282930  

タグ

Social