【WordPress】YouTube動画をレスポンシブサイズで埋め込む方法 | LIVE YOUR LIFE

 

【WordPress】YouTube動画をレスポンシブサイズで埋め込む方法

 

今回は、WordPressにYouTube動画をレスポンシブサイズで埋め込む方法を解説していきます。

 

Webサイトやブログで記事を執筆していく際には、文字だけでは読者の方に読んでいてつらい思いをさせてしまう可能性があります。

何よりサイトに訪れるユーザーの多くが、今やパソコンではなくiPhoneなどのモバイル端末で閲覧していることからも、文字だけの記事ではやはり読みづらい思いをすることでしょう。

 

そこで、記事内に画像動画を適度に挿入しておくことにより、ユーザーにとっても非常に読みやすい記事をお届けすることができます。

モバイル端末を意識してレスポンシブサイズの動画を挿入するためにも、ぜひ今回の解説を参考にしていただければと思います。

 

動画でも解説しているので、ぜひご覧ください。

 

WordPressでYouTube動画を埋め込むと…

 

まず、WordPressでYouTube動画をそのまま埋め込むと、次のような感じになります。

 

 

これでもまあ良いと言えば良いのですが、少しコンテンツ部分の幅に比べて動画のサイズが小さいなーと。

当サイトでは画像サイズも記事コンテンツと同じくらいの幅にしているので、動画もどうにかコンテンツ幅まで広げられないかと思いました。

 

そして何より、デフォルトの設定のままYouTube動画を埋め込んでも、iPhoneなどのモバイル端末で見た際になかなかひどいことが起きてしまいます。

次のイメージを見ていただければわかると思いますが、動画のサイズがレスポンシブ対応に調節されていないんですね。

 

このように、動画が画面の途中で切れてしまっていたり、はたまたモバイル端末でのコンテンツ幅を大きく上回ってしまっていたりすると。

これでは、モバイルユーザーに対して快適な検索体験を提供できていることにはならないので、絶対に改善しておきたいところです。

 

そこで、ここからは実際にYouTube動画をレスポンシブサイズで埋め込む方法について解説していきましょう。

 

YouTube動画をレスポンシブサイズで埋め込む方法

 

比較的カンタンにレスポンシブサイズの動画を埋め込むことができるので、解説を見ながら作業してみてくださいね。

 

順序は非常に単純で、

  1. YouTubeで埋め込みコードを取得する
  2. CSSでYouTube動画をレスポンシブサイズにする
  3. プラグイン『AddQuicktag』を併用する

3番のプラグインの併用については、+αの要素として捉えていただければOKです。

 

コードについてもコピーペーストするだけでそのまま使えるようになっているので、ぜひ解説を参考までに。

 

YouTubeで埋め込みコードを取得する

 

それではまず、WordPressの記事に動画を埋め込むためのコードを取得しましょう。

 

最初に、貼り付けたい動画のYouTube画面へ移っていただき、動画下のタブから『共有』をクリックします。

 

続いて動画の共有画面が表示されるので、『埋め込む』をクリックしましょう。

ちなみに、ここで表示されているURLをそのまま記事で貼り付けると、先ほどのようにデスクトップでは小さくモバイルでは大きすぎるというサイズになってしまうので、ご注意ください。

 

『埋め込む』をクリックすると次のような画面が表示されるので、画像の赤枠で囲ってあるコードをコピーしましょう。

 

これでひとまず、YouTube動画の埋め込みコードは取得できました。

次に、実際にWordPressの記事に動画を埋め込んでいきます。

 

CSSでYouTube動画をレスポンシブサイズにする

 

先ほど取得したコードをそのままペースとしてもYouTube動画は埋め込むことができるのですが、今回はレスポンシブサイズに対応させるため、コードを少しいじっていきます。

 

まず、レシポンシブサイズを実装させると、以下のようなHTMLならびにCSSを記述していくこととなります。

See the Pen YouTube-responsive2 by RIKU (@coderiku) on CodePen.

 

ただこれだけ見ても何をどうすればいいのかわからないかもしれないので、詳しくコードの解説をしていきましょう。

 

まず、先ほど取得したYouTube動画の埋め込みコードは次のようなものですね。

 

ここでは上記のコードをレスポンシブ対応させるために、divタグでくくって『youtube』というクラスを指定します。

コードでは次のような感じになりますね、YouTube動画の埋め込みコードはご自身で取得したものに変更してお使いください。

 

続いて、指定した『youtube』というクラスに対してCSSでサイズを指定していきます。

 

テーマによって名称は異なりますが、以下のコードをスタイルシート(当サイトで使用している賢威であれば『design.css』)へ追記しましょう。

 

これで基本的な設定は完了です。

CSSにコードを記載したら、先ほど『youtube』というクラスで指定した埋め込みコードを記事投稿画面に書き込んでみると、無事レスポンシブサイズに対応しているかと思います。

 

プラグイン『AddQuicktag』も併用しよう

 

ただ、いちいち『YouTubeで取得した埋め込みコードを、<div class=”youtube”></div>でくくって…』というのもなかなか面倒な作業です。

 

そこで、コードでの装飾を便利にするプラグイン『AddQuicktag』を活用していきましょう。

プラグインの導入がまだという場合は、まずプラグインのインストールならびに有効化を済ませておいてくださいね。

 

プラグインを導入したら、WordPressのダッシュボード画面から『設定』→『AddQuicktag』を選択します。

 

すると、AddQuicktagの設定画面が表示されるので、次の画像を参考に同じような設定を施しましょう。

 

詳しく解説すると、まずは『ラベル名』の項目に『YouTubeレスポンシブ』と記入します(名前はお好みで構いません)。

 

続いて、『開始タグと終了タグ』の項目に以下のコードならびに文章を記入しましょう。

 

そして、右側にあるチェックリストの全てにチェックを入れるようにします(一番右のボックスにチェックを入れれば全てにチェックが入ります)。

 

3つの項目を設定し忘れずに『変更を保存』をクリックしたら、実際に記事投稿画面で仕様を確認してみましょう。

次のように投稿画面のビジュアルエディタに『Quicktags』というボタンが実装されており、リストの中に『YouTubeレスポンシブ』というタグが追加されていますね。

 

これからは、このボタンをクリックするだけで、先ほどプラグインの設定画面で指定した以下のコードが挿入されるようになります。

 

ここにある『YouTube埋め込みコード』の部分を、YouTube画面で取得できる動画の埋め込みコードに置き換えればOKです(ただし必ず『ビジュアルエディタ』ではなく『テキストエディタ』で挿入すること!)。

 

これで無事、YouTube動画を埋め込む際にいちいち『<div class=”youtube”></div>』というコードを書き込む必要がなくなりましたね。

これからは投稿画面のエディタ内にあるボタンをワンクリックするだけで、クラス指定したコードを呼び出すことができます。

 

補足:YouTube動画をオシャレにカスタマイズしてみました

 

ここからは補足の内容となるので、もし余裕がある方は参考にしてみてください。

 

YouTube動画をレスポンシブサイズに対応させることができましたが、当サイトではさらに埋め込み動画のデザインにも少し手を加えています。

実際に変更前のものと変更後のものを見比べてみましょう。

See the Pen YouTube-responsive2 by RIKU (@coderiku) on CodePen.

See the Pen YouTube-responsive by RIKU (@coderiku) on CodePen.

 

だいぶ微妙な差ではあると思うのですが、気づいていただけたでしょうか?

というのも、CSSに少し手を加えてYouTube動画の周りにをつけてみました。

 

実装するには、スタイルシート(当サイトで使用している賢威であれば『design.css』)に記載するコードを、次のように変更しています。

 

このように『box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);』というコードを加えて動画の周囲に影をつけていますが、結果として次のような見栄えになります。

 

デフォルトのものよりも、だいぶオシャレに仕上がりましたね。

こうして少しの変化を加えるだけでも、他のサイトやブログとの差別化を図れるものですので、ぜひあなたのサイトにも取り入れてみてください。

 

最後に

 

以上、WordPressにYouTube動画を埋め込む際に、レスポンシブサイズに対応させる方法を解説しました。

いかがだったでしょうか?

 

実際、このようにYouTube動画をレスポンシブ対応させているサイトは意外に少なく、よくモバイル端末で動画がはみ出してしまっているサイトを見かけることも少なくはありません。

正直そういったサイトを見かけた際には『もったいないなー』と感じずにはいられませんし、何よりサイトを訪れたユーザーに対して満足のいく検索体験を提供できていないことにもなりますよね。

 

そういった残念な例にはなってしまわないよう、ぜひ今回の解説をもとにレスポンシブ対応させたYouTube動画を埋め込んでいただければと思います。

 

最後に解説した影をつけて動画の見栄えをオシャレにするカスタマイズについても、実装しているサイトもあまり見かけたことがないので、ぜひ気に入った方は取り入れてみてくださいね。

 


MAIL MAGAZINE

RIKU

最後まで読んでいただきありがとうございます!

僕のコンサルなど最新の情報は、
無料のメール講座にご登録いただいた方に優先的にお届けしていきます。

その他ビジネスに関する情報からプライベートに関する何気ない話題まで
表のブログではできないお話を楽しくお届けしているので、
ぜひ気軽にご参加くださいね:)

 

 

     

公開日:2017/09/07 更新日:2017/09/08

コメントを残す

サブコンテンツ
FEATURED ARTICLE

TO THE TOP