WordPressにYoutube動画をレスポンシブで埋め込む方法【簡単】

WordPressにYoutube動画をレスポンシブで埋め込む方法【簡単】WordPress

「WordPressにYOUTUBE動画を埋め込んだけど、スマホで見たら動画がはみ出てる…!!」

ということがないように、この記事ではWordPressにYOUTUBE動画をレスポンシブで埋め込む方法をお伝えします。

CSSをいじるのですが、コピペでOKなので安心してください。簡単に出来るので、もしYOUTUBE動画をレスポンシブで埋め込みたい場合は参考にしてもらえればなと。

それではさっそく見ていきましょう。

YOUTUBE動画をレスポンシブ対応させるCSSを追加する

まず、CSSにYOUTUBE動画をレスポンシブ対応する記述を追記していきます。

WordPressの「外観」の「カスタマイズ」をクリックします。

WordPress外観のカスタマイズ

そのあと「追加CSS」をクリック。

WordPressにCSSを追加する

そしたら、CSSに以下の記述をコピペしてください。

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

以下のように貼り付けて下さいね。

WordPressにCSSを追加する②

そしたら上の方にある「公開」をクリックして保存しましょう。

WordPressでカスタマイズを公開する

さて次に、WordPressの投稿にYOUTUBE動画を埋め込んでいきます。

WordPressにYOUTUBE動画をレスポンシブで埋め込む2つの方法

WordrPressにYOUTUBE動画を埋め込むのは、以下の2つの方法があります。

  1. 埋め込みたいYOUTUBE動画のソースを投稿に貼り付ける
  2. プラグイン『AddQuickTag』でYOUTUBE動画を貼り付ける

もしWordPressにYOUTUBE動画を頻繁に埋め込みたいのであれば、後者の方法がおすすめです。

一つずつお伝えしますね。

①埋め込みたいYOUTUBE動画のソースを投稿に貼り付ける

WordPressにYOUTUBE動画を埋め込むために、埋め込み用のソースをコピーしていきます。

YOUTUBE動画の埋め込みソースをコピーするために、まずは動画下にある「共有」をクリックします。

YOUTUBE動画のソースコードをコピーする①

そしたらリンクの共有から「埋め込む」をクリック。

YOUTUBE動画のソースコードをコピーする②

ソースが表示されるので、WordPressに貼り付けていきましょう。

YOUTUBE動画のソースコードをコピーする③

そしたらテキストモードで貼り付けましょう。

そのあとソースの前に「<div class=”youtube”>」と入力し、ソースの後ろに「</div>」と入力してください。

分かりにくいと思うので、以下の例を参考にしてみましょう。

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

WordPressにYOUTUBE動画を埋め込む

これで貼り付けたYOUTUBE動画がレスポンシブ対応になります。

②プラグイン『AddQuicktag』でYOUTUBE動画を貼り付ける

次に、プラグインのAddQuicktagを使ったYOUTUBE動画の貼り付け方法をお伝えします。

この方法は、頻繁にYOUTUBE動画をWordPressに埋め込む場合におすすめ。

まずはプラグインの『AddQuicktag』をインストールしていきましょう。

そして有効化したら、WordPressのメニューの「設定」から「AddQuicktag」をクリックします。

addquicktagの設定①

そしたら以下の画像のように、YOUTUBE動画を埋め込むための情報を入力していきます。

addquicktagの設定②

  • ラベル名:「YOUTUBE動画」でOK
  • 開始タグ:<div class=”youtube”></div>
  • 右側の全てにチェックを入れる

上記を入力したら「変更を保存」をクリックしましょう。

そしたら「投稿」の「テキストモード」から、追加したタグの「YOUTUBE動画」をクリックしてみて下さい。

addquicktagの設定③

上記画像のように、先ほど入力した「<div class=”youtube”></div>」が入力されます。

そしたら<div class=”youtube”>と</div>の間に、以下のようにYOUTUBE動画の埋め込みソースを入力してください。

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

これでYOUTUBE動画をレスポンシブで埋め込むことが出来ました。

自分でも試してみて、PCやスマホなどでレスポンシブになっているかどうか確認してみて下さい。

以上、お読みいただきありがとうございました。

WordPress
役に立ったらシェアお願いします!
マーケのじかんをフォローする
スポンサーリンク
ブログ運営者
コピーライター古川

東証マザーズ上場の株式会社トゥエンティーフォーセブンにて、2013年5月から2018年2月末までの約5年、コピーライター兼マーケッターとして経験を積み、その後に独立しました。セールスレター・LP30本以上、メルマガ・ステップメール1400本以上、SEO記事300本以上書いてきました。情報商材やサプリメント系物販、セミナー集客や英会話教室立上げ、オウンドメディアの立ち上げや運営など、企画・開発・販促・顧客対応など経験してます。現在は複数企業のメディアやメルマガなどのコンサルティングやお手伝いをしています。

マーケのじかんをフォローする
FullP Blog(旧:マーケのじかん)
タイトルとURLをコピーしました