「WordPressにYOUTUBE動画を埋め込んだけど、スマホで見たら動画がはみ出てる…！！」
ということがないように、この記事ではWordPressにYOUTUBE動画をレスポンシブで埋め込む方法をお伝えします。
CSSをいじるのですが、コピペでOKなので安心してください。簡単に出来るので、もしYOUTUBE動画をレスポンシブで埋め込みたい場合は参考にしてもらえればなと。
それではさっそく見ていきましょう。
YOUTUBE動画をレスポンシブ対応させるCSSを追加する
まず、CSSにYOUTUBE動画をレスポンシブ対応する記述を追記していきます。
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の投稿にYOUTUBE動画を埋め込んでいきます。
WordPressにYOUTUBE動画をレスポンシブで埋め込む2つの方法
WordrPressにYOUTUBE動画を埋め込むのは、以下の2つの方法があります。
- 埋め込みたいYOUTUBE動画のソースを投稿に貼り付ける
- プラグイン『AddQuickTag』でYOUTUBE動画を貼り付ける
もしWordPressにYOUTUBE動画を頻繁に埋め込みたいのであれば、後者の方法がおすすめです。
一つずつお伝えしますね。
①埋め込みたいYOUTUBE動画のソースを投稿に貼り付ける
WordPressにYOUTUBE動画を埋め込むために、埋め込み用のソースをコピーしていきます。
YOUTUBE動画の埋め込みソースをコピーするために、まずは動画下にある「共有」をクリックします。
そしたらリンクの共有から「埋め込む」をクリック。
ソースが表示されるので、WordPressに貼り付けていきましょう。
そしたらテキストモードで貼り付けましょう。
そのあとソースの前に「<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>
これで貼り付けたYOUTUBE動画がレスポンシブ対応になります。
②プラグイン『AddQuicktag』でYOUTUBE動画を貼り付ける
次に、プラグインのAddQuicktagを使ったYOUTUBE動画の貼り付け方法をお伝えします。
この方法は、頻繁にYOUTUBE動画をWordPressに埋め込む場合におすすめ。
まずはプラグインの『AddQuicktag』をインストールしていきましょう。
そして有効化したら、WordPressのメニューの「設定」から「AddQuicktag」をクリックします。
そしたら以下の画像のように、YOUTUBE動画を埋め込むための情報を入力していきます。
- ラベル名：「YOUTUBE動画」でOK
- 開始タグ：<div class=”youtube”></div>
- 右側の全てにチェックを入れる
上記を入力したら「変更を保存」をクリックしましょう。
そしたら「投稿」の「テキストモード」から、追加したタグの「YOUTUBE動画」をクリックしてみて下さい。
上記画像のように、先ほど入力した「<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やスマホなどでレスポンシブになっているかどうか確認してみて下さい。
以上、お読みいただきありがとうございました。