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

本ページはプロモーションが含まれています

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

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

目次

WordPressにYouTubeを埋め込む

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

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

YouTubeの共有ボタン
YouTubeの共有ボタン

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

YouTuneの埋め込みタグを取得
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レスポンシブ対応
wordpressのYouTubeレスポンシブ対応

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

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

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

まとめ

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

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

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

志賀裕一のアバター 志賀裕一 サーバーチョイス 編集者

Web開発歴6年のフリーランスエンジニア。大学在学中から教育系Webメディアを運営するスタートアップにて、Webディレクターとして従事。独立からこれまでに多くのコーポレートサイトやCRM、予約システムなどのシステム開発、オウンドメディア運営を経験。20以上のレンタルサーバーの使用経験を持つ。

目次