WordPressに埋め込んだYouTubeをレスポンシブ対応する方法

WordPressにYouTube動画を埋め込んでみたはいいものの、レスポンシブ対応ができず、スマートフォンで見てみると横幅がはみ出ていたり、動画の縦横比がおかしなことになっている経験はありませんか。

今回はHTMLとCSSを少し編集するだけで、誰でも簡単にYouTube動画をレスポンシブ対応させる方法をご紹介します。

WordPressにYouTubeを埋め込む

まずは、YouTube動画をWordPressの投稿に埋め込みます。今回はYouTubeが提供しているiframeタグを貼り付けて埋め込んでいきます。

埋め込みたいYouTubeの動画ページを開きます。動画の下部に「共有」ボタンあるので、クリックしてください。

YouTubeの共有ボタン

埋め込むをクリックし、iframeタグをコピーしてください。

YouTuneの埋め込みタグを取得

WordPressの投稿画面をテキストモードにし、コピーしたiframeタグをペーストしてください。

iframeタグの埋め込み

これでYouTube動画の貼り付けは完了です。

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

埋め込んだYouTube動画をレスポンシブ対応させていきます。

HTML(iframe)を編集する

下記のようにiframeタグをdivタグで囲んでください。divタグにはclass=”youtube”を付与しておきます。

<div class="youtube">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/72xdCU__XCk" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

これでHTMLの準備は完了です。

CSSを編集する

上記で記述したclass=”youtube”を使って、CSSを定義していきます。

下記のようにCSSを記述してください。

.youtube {
position: relative;
width: 100%;
padding-top: 56.25%;
height: 0;
overflow: hidden;
}
.youtube iframe{
position: absolute;
top: 0;
right: 0;
width: 100% !important;
height: 100% !important;
}

これでCSSの定義は完了です。投稿画面で更新をクリックして、確認してみてください。レスポンシブ対応がされていると思います。

wordpressのYouTubeレスポンシブ対応

プラグインでレスポンシブ対応する方法

プラグインを使用してレスポンシブ対応をする方法を下記の記事で紹介しています。

HTMLやCSSを編集するのは面倒という方はこちらも試してみてください。

まとめ

スマートフォンでWebサイトを閲覧するのが当たり前になった最近の環境では、レスポンシブ対応を行うことは当然となってきています。

YouTubeをはじめとした動画コンテンツへの対応も例外ではありません。HTMLとCSSの知識がそれほどない方でも、今回の方法は基本的にコピペするだけで実装できるので、是非みなさんもトライしてみてください。

制作費用参考表

想定費用 想定納期
コーポレートサイト 10万円〜 1ヶ月〜
メディアサイト 10万円〜 1ヶ月〜
WordPressテンプレートプラン 5万円〜 3週間〜
ランディングページ 5万円〜 1ヶ月〜
保守運用 1万円〜 -
SEOコンサルティング 1万円〜 最低契約期間3ヶ月
その他サイト不具合等のご相談 応相談