ユーティリーは、仕事やライフスタイルの ”はかどる” サービスを紹介していくメディアです

YouTube動画をワードプレスでレスポンシブ対応する方法

This post is also available in: English

Ads

はじめに

 

 

ワードプレスなどのサイトにおいて、レスポンシブ対応が直近では主流になっていますが、本記事では特にYouTube動画をレスポンシブ対応させる方法をお伝えします。

レスポンシブとは

レスポンシブデザインに関してはGoogleの開発者サイトでは以下のように定義されています。Googleとしても推奨する手法です。

ユーザーのデバイスの種類(パソコン、タブレット、モバイル、非視覚的ブラウザ)に関係なく、同じ URL で同じ HTML コードを配信しつつ、画面サイズに応じてレンダリング方法を変更します。レスポンシブ ウェブ デザインは、Google がおすすめする設計方法です。(Google開発者サイトより)

 

YouTube動画をレスポンシブ対応させる対応

 

「YouTube logo」の画像検索結果

 

それでは早速YouTube動画をレスポンシブ対応させる方法を紹介します。

CSSを追加

まずはワードプレスで設定をします。

外観 > テーマエディタからCSSの編集画面を出します。

ここに以下のCSSを追記します。

.youtube {
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要素を使用する形になります。

<div class=”youtube1″>埋め込みコード</div>

埋め込みコードはYouTubeの共有ボタンから遷移する、以下右下のコードです。

 

上記の埋め込みコードを実際に使うと以下のようなかたちになります。

<div class=”youtube1″>
<iframe src=”https://www.youtube.com/embed/oK_cPoF6bIE” width=”560″ height=”315″ frameborder=”0″ allowfullscreen=”allowfullscreen”></iframe>
</div>

実際のサンプルは以下です。

PCブラウザの大きさを変更してみるとレスポンシブ対応していることがおわかりいただけるかと思います。

 

最後に

以上でYouTube動画をワードプレスサイトでレスポンシブ対応させる方法を終了します。

ユーティリーではYouTube動画の埋め込みに役立つコードのまとめ記事も掲載しています。

よろしければ以下の記事もご覧ください。

自動再生や字幕表示などYouTube埋め込みコードのカスタマイズ方法をご紹介

フォローして最新情報をチェック!
Ads