ここあです。
最近、私はブログ記事の作成だけではなく、
動画の撮影や編集などもしているのですが
動画を編集すると、せっかくだからとブログの記事にも
やっぱり貼りたくなりますね。
※このサイトには貼りませんが（笑）
ですが、ワードプレステーマによっては
動画がレスポンシブ対応になっておらず
仮に動画が貼れたとしても
都合よくレスポンシブにならない場合があります。
実際に、私が今使っているTHE THORもそうですが
Youtube動画の埋め込みコードを反映しても
記事のコンテンツ幅にピッタリと合わなかったり、
レスポンシブにならなかったりとなかなか上手く
動画を埋め込むことができませんでした。
ということで、これからの動画時代に必要となる
Youtube動画の埋め込み方法、特にスマホでも綺麗に見れる
レスポンシブ対応の方法について解説させていただきますので
ワードプレスのブログにYoutube動画を埋め込みたいけど、
上手く埋め込めないというあなたはぜひ参考にしてくださいね。
THE THORにYoutube動画を埋め込む方法
私が今、使用しているワードプレステーマはTHE THORですが
ワードプレスにYoutube動画を埋め込む方法はどれも同じです。
ということで、まずはあなたがブログに埋め込みたい
Youtube動画の埋め込みコードをコピーしましょう。
例えば、私がよく参考にしているAK Englishの動画を
ブログに埋め込む場合、以下の共有ボタンをクリックすると
このようなYoutube動画を共有するためのウインドウが新たに表示されますので
一番左にある「埋め込む」をまずはクリックしてください。
「埋め込む」をクリックすると、
以下のような動画を埋め込むためのコードが表示されますので
右下にある「コピー」をクリックすると、埋め込みコードが全てコピーできます。
埋め込みコードをコピーしたら、今度はワードプレスに戻り
ビジュアル編集モードではなく、テキスト編集モードに変えて
埋め込みコードをペースト（貼り付け）します。
ただし、THE THORの場合は、
そのままYoutubeの埋め込みコードを貼ったままでは
このように、画像サイズが小さかったり
画像を小さくすると、レスポンシブにならず、画面が切れたりと
ただコードを埋め込むだけでは上手く表示ができません。
だからと言って、それだけのためにプラグインを追加しても
正直、メリットがありませんので、こういう時にこそ使えるのが
我らの強い味方「CSSコード」です（笑）
ということで、CSSとHTMLで調整しましょう！
Youtube動画をレスポンシブ対応にする方法
Youtube動画をCSSで調整するには、HTMLコードの下準備が必要となります。
ですので、まずは、HTMLコードから調整します。
とは言え、やることはすごく簡単！
先ほどブログに貼り付けたYoutubeコードの前後に
以下、HTMLコードをまずは追記してください。※ピンクの部分を新たに追記
実際に上記追加するHTMLコードを反映した時のイメージは、以下を参考にしてください。
ちなみに、新たに追加したクラス名「youtube-wrap」の部分は、
あなたがわかりやすい英字の文字列に変更してもらっても大丈夫です。
※よく分からないというあなたは、そのままコピペしてください。
HTMLコードにCSSを反映するためのコードが追記できたら、
あとはCSSをコピーするだけでOKです。
ということで、CSSコードの反映先は、ダッシュボードメニューから
外観 → カスタマイズ → 追加CSSをクリックし、
以下の部分に記述するようにしてください。
新たに追記すCSSは以下の通り
- 追加CSSにコピペ
- .youtube-wrap {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.youtube-wrap iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
なお、HTMLコードのクラス名を「youtube-wrap」から、
別のクラス名に変更した場合は、CSSコードの1行目「.youtube-wrap {」と
7行目「.youtube-wrap iframe {」これら2箇所
「youtube-wrap」となっている部分を、
あなたが変更した任意のクラス名に変えてください。
※HTMLとCSSコードに整合性が取れてないと、CSSが反映されなくなりますので、気をつけてくださいね。
上記、CSSコードをコピペすれば、
Youtube動画はコンテンツ幅ぴったりに収まりますし
画面を小さくしても、Youtube動画の画面が切れるということもなくなります。
ということで、「Youtube動画が上手くレスポンシブにならない！」と
お困りのあなたは、ぜひ参考にしてくださいね。
実際に、上記HTMLとCSSコードを反映した動画を貼っておきますので
画面サイズを大きくしたり、小さくしたりして
レスポンシブの動き具合もぜひ確認してみてください。
↓レスポンシブ対応のYoutube動画サンプルがこちら
レスポンシブが上手くいってるのに動画のイメージが泣いているのでちょっと違和感（笑）
サンプル動画を間違えたかも…と思いつつも、まぁ、良いです。
そこは重要じゃないので＾＾
Youtube動画の埋め込みをレスポンシブにする方法まとめ
今回は、Youtube動画をワードプレスのブログに綺麗に埋め込むために
レスポンシブ対応にする方法について解説致しました。
今はまだブログの記事はテキストと画像だけのものが多く、
動画とブログを切り離して考えれられている方も多いかと思います。
しかしこれからは5Gという、大容量の通信回線に切り替わることで
ブログの記事も画像やテキストだけではなく「動画＋テキスト」が
主流になる可能性が十分にあります。
だから私は今、動画の編集方法や動画データの圧縮方法
動画をブログに反映する方法など、自分でも色々と勉強しながら
日々研究するのがすごく楽しいです。
実際にブログに動画を貼るとよく分かりますが
Youtube動画を埋め込むにしても、Youtubeの動画コードをただコピーして
ブログに貼るだけなので、一見簡単そうに見えますが、
思いのほか上手くブログに反映できないということがあるんですね。
なので、逆にそういうことを先に自分がしておけば
これから同じように、動画を使うとより効果的と考えるようになる人たちには
その反映方法やコツというのを、しっかりと教えることができるようになります。
つまり、なんでも先手必勝だということ。
さらに言うと、どれだけ周りよりも自分が先に動き一歩前に進めるか？
特にビジネスにおいては、
例え半歩先でも、前を行くという意識が何よりも大事です。
なので、逆に「自分にはまだ早い」と考えるのではなく
「とにかくまずはやってみよう！」という気持ちで
できるできないに関わらず何事にも果敢に挑戦してみてくださいね。
動画の撮影に関しても、
自分が思っている以上に上手く話せなかったり、編集作業に手間取ったりと
始めは簡単そうに見えて意外と時間がかかります＾＾；
なので「いつでもすぐ簡単にできそうだし…」なんて思っていると
いざ自分が作業を始めようと思った時
「こんなに時間もかかるし大変なのか？」と焦りが出てしまいます。
そういう意味でも、興味のあることに関しては
できるだけ早く手をつけておくというのも重要ですので、
あなたも一度、ブログの記事に動画を反映してみて
動画も意外と良いなと思った際には、ご自身で動画の撮影をしてみて
Youtubeにアップする方法や、動画の編集方法も
ぜひ色々と学んでみてくださいね。
私の記事が、あなたにとってそんなきっかけになると嬉しいです。
ということで、最後までお読みいただき
ありがとうございました！
