This post is also available in: English
はじめに
ワードプレスなどのサイトにおいて、レスポンシブ対応が直近では主流になっていますが、本記事では特にYouTube動画をレスポンシブ対応させる方法をお伝えします。
レスポンシブとは
レスポンシブデザインに関してはGoogleの開発者サイトでは以下のように定義されています。Googleとしても推奨する手法です。
YouTube動画をレスポンシブ対応させる対応
それでは早速YouTube動画をレスポンシブ対応させる方法を紹介します。
CSSを追加
まずはワードプレスで設定をします。
外観 > テーマエディタからCSSの編集画面を出します。
ここに以下のCSSを追記します。
position: relative;
width: 100%;
padding-top: 56.25%;
}
.youtube iframe {
position: absolute;
top: 0;
right: 0;
width: 100% !important;
height: 100% !important;
}
今回は便宜的に”youtube1”と追記します。
CSSでiframe要素の幅と高さを100%にします。
また、位置をabsoluteにしているようなイメージになります。
以上でCSSの追記は終了です。
投稿画面でコードを追加
次は実際の投稿画面で以下のコードを入力します。
埋め込みコードの前後を<div>ではさみます。
YouTube動画の埋め込みにframe要素を使用する形になります。
埋め込みコードはYouTubeの共有ボタンから遷移する、以下右下のコードです。
上記の埋め込みコードを実際に使うと以下のようなかたちになります。
<iframe src=”https://www.youtube.com/embed/oK_cPoF6bIE” width=”560″ height=”315″ frameborder=”0″ allowfullscreen=”allowfullscreen”></iframe>
</div>
実際のサンプルは以下です。
PCブラウザの大きさを変更してみるとレスポンシブ対応していることがおわかりいただけるかと思います。
最後に
以上でYouTube動画をワードプレスサイトでレスポンシブ対応させる方法を終了します。
ユーティリーではYouTube動画の埋め込みに役立つコードのまとめ記事も掲載しています。
あわせて読みたい
はじめに ブログやメディアの運営においても動画の訴求力は非常に高いものがあります。本記事ではYouTube動画をワードプレスメディアに埋め込む方法を紹介します。中身を覚えれば非常に簡単に動画をアップロードすることができます。 事[…]
はじめに 本記事ではYouTubeの埋め込みコードのカスタマイズ方法を紹介します。ワードプレスブログやメディアの運営において、動画訴求を行う場合によりキメ細やかな設定ができるようになります。 参考：YouTube動画のワードプレスへの基[…]
