2019.01.12「WordPressにYOUTUBE動画を埋め込んだけど、スマホで見たら動画がはみ出てる...!!」ということがないように、この記事ではWordPressにYOUTUBE動画をレスポンシブで埋め込む方法をお伝えします。CSSをいじるのですが、コピペでOKなので安心してください。簡単に出来るので、もしYOUTUBE動画をレスポンシブで埋め込みたい場合は参考にしてもらえればなと。それではさっそく見ていきましょう。目次YOUTUBE動画をレスポンシブ対応させるCSSを追加するWordPressにYOUTUBE動画をレスポンシブで埋め込む2つの方法1埋め込みたいYOUTUBE動画のソースを投稿に貼り付ける2プラグイン『AddQuicktag』でYOUTUBE動画を貼り付けるYOUTUBE動画をレスポンシブ対応させるCSSを追加するまず、CSSにYOUTUBE動画をレスポンシブ対応する記述を追記していきます。WordPressの「外観」の「カスタマイズ」をクリックします。そのあと「追加CSS」をクリック。したら、CSSに以下の記述をコピペしてください。100%;}以下のように貼り付けて下さいね。したら上の方にある「公開」をクリックして保存しましょう。次に、WordPressの投稿にYOUTUBE動画を埋め込んでいきます。WordPressにYOUTUBE動画をレスポンシブで埋め込む2つの方法WordrPressにYOUTUBE動画を埋め込むのは、以下の2つの方法があります。埋め込みたいYOUTUBE動画のソースを投稿に貼り付けるプラグイン『AddQuickTag』でYOUTUBE動画を貼り付けるもしWordPressにYOUTUBE動画を頻繁に埋め込みたいのであれば、後者の方法がおすすめです。一つずつお伝えしますね。1埋め込みたいYOUTUBE動画のソースを投稿に貼り付けるWordPressにYOUTUBE動画を埋め込むために、埋め込み用のソースをコピーしていきます。YOUTUBE動画の埋め込みソースをコピーするために、まずは動画下にある「共有」をクリックします。したらリンクの共有から「埋め込む」をクリック。ソースが表示されるので、WordPressに貼り付けていきましょう。したらテキストモードで貼り付けましょう。class=”youtube”>」と入力し、ソースの後ろに「</div>」と入力してください。分かりにくいと思うので、以下の例を参考にしてみましょう。allowfullscreen></iframe></div>これで貼り付けたYOUTUBE動画がレスポンシブ対応になります。2プラグイン『AddQuicktag』でYOUTUBE動画を貼り付ける次に、プラグインのAddQuicktagを使ったYOUTUBE動画の貼り付け方法をお伝えします。この方法は、頻繁にYOUTUBE動画をWordPressに埋め込む場合におすすめ。プラグインの『AddQuicktag』をインストールしていきましょう。有効化したら、WordPressのメニューの「設定」から「AddQuicktag」をクリックします。したら以下の画像のように、YOUTUBE動画を埋め込むための情報を入力していきます。class=”youtube”></div>右側の全てにチェックを入れる上記を入力したら「変更を保存」をクリックしましょう。したら「投稿」の「テキストモード」から、追加したタグの「YOUTUBE動画」をクリックしてみて下さい。class=”youtube”></div>」が入力されます。class=”youtube”>と</div>の間に、以下のようにYOUTUBE動画の埋め込みソースを入力してください。allowfullscreen></iframe></div>これでYOUTUBE動画をレスポンシブで埋め込むことが出来ました。自分でも試してみて、PCやスマホなどでレスポンシブになっているかどうか確認してみて下さい。以上、お読みいただきありがとうございました。東証マザーズ上場の株式会社トゥエンティーフォーセブン(年商約78億)にて、2013年5月から2018年2月末までの約5年、コピーライター兼マーケッターとして経験を積み、その後に独立しました。セールスレター・LP30本以上、メルマガ・ステップメール1400本以上、SEO記事300本以上書いてきました。現在は複数企業のメディアやメルマガ運営などのお手伝いをしています。東証マザーズ上場の株式会社トゥエンティーフォーセブン(年商約78億)にて、2013年5月から2018年2月末までの約5年、コピーライター兼マーケッターとして経験を積み、その後に独立しました。セールスレター・LP30本以上、メルマガ・ステップメール1400本以上、SEO記事300本以上書いてきました。現在は複数企業のメディアやメルマガ運営などのお手伝いをしています。ツイッターのDMで無料相談受付中!答えられる範囲で答えます↓↓タイトルとURLをコピーしました。