【ワードプレスブログ用】YouTubeのショート動画をきれいに埋め込む方法と注意点

ワードプレスでブログ運営をやっている人はYouTubeやX(旧Twitter)など、ほかのSNSも利用している人が多い傾向にあります。

中にはYouTubeをブログの記事内に入れたり、反対にブログの紹介をYouTubeの概要ランに掲載する人も多いのではないでしょうか？

私もまさにこれらSNSを活用しまくっているのですが、先日YouTubeのショート動画をブログに載せる際、とても大きな画面でしか埋め込むことができない状況に陥りました。

そのままでも問題はありませんが、読者ファーストこそブロガーの使命。より読者が読みやすい記事を心がけたい私はどうしてもサイズを『程よい大きさ』に変更したかったのです。

ChatgptやCopilotなどいろんなAIと検証を駆使して個人的に程よい大きさのショート動画を掲載することに成功しました。

本記事ではこの方法と注意点などを備忘録もかねて紹介します。

【方法】カスタムHTMLに定型CSSを入力する

程よいショート動画の大きさで埋め込むには定型CSSをカスタムHTMLに入力すれば解決します。

<div style="display: flex; justify-content: center;">

    <iframe width="315" height="560" src="https://www.youtube.com/embed/youtube id" frameborder="0" allowfullscreen></iframe>

</div>

【注意点】src=”のあとにYouTubeのURLをコピペ

注意点としては1点だけ。定型CSSのsrc=”のあとにあなたがブログに載せたいショート動画のURLをそのままコピペすることを忘れない点です。

もっと自分好みのサイズにしたいときは、前半部分のwidthやらheightやらの数値を変更すれば可能です。

ただめんどくさい人は筆者個人が気に入ったこのサイズ感のまま使用してもOKです。

なぜそのまま『埋め込み』ではダメなのか？

• 【ダメな理由①】ワードプレスの『埋め込み』機能が横画面しか最適な大きさで掲載してくれないから
• 【ダメな理由②】ほとんどの人がブログ記事をモバイルで閲覧するため、より見やすい様にしたいから

【ダメな理由①】ワードプレスの『埋め込み』機能が横画面しか最適な大きさで掲載してくれないから

『埋め込み』機能がYouTubeの横画面16:9しか、最適な大きさで掲載してくれないからです。もちろんショート動画も『埋め込み』機能だけで問題なく掲載できます。

ただ読者ファーストな記事ほどGoogleのアルゴリズムがプラスに働きますよね。

【ダメな理由②】ほとんどの人がブログ記事をモバイルで閲覧するため、より見やすい様にしたいから

もう1つの理由はほとんどの読者が記事をモバイルで閲覧する点です。

読者ファーストを目標として記事を書くならば、読者にストレスを与えない記事作りが必要不可欠。

読者がモバイルで見たときにストレスに感じるのはどこか？

いくつかあるんですが、その最たるストレスは『スクロールの多さ』にあります。

人の手間解消のカギは引き算の原理にあると筆者自身は常々感じます。

記事を読む際に最もストレスが掛からないのは、表示された画面だけで記事を読んでしまえることです。

スクロールもタップもしない状態こそ手間が限りなく少なくなりますよね。

これと同じでモバイル閲覧の場合スクロールという手間が増えれば増えるほど、読者のストレスが掛かります。

そのまま埋め込めば、かなり大きいショート動画画面が完成してしまい、スクロール回数を増やしてしまいます。

そうならない読者ファーストな記事を目指すためにも少し面倒ではありますが、ショート動画をブログに掲載するときは定型CSSなどで大きさを手動で調整するべきです。

まとめ：YouTubeのショート動画をワードプレスにきれいに埋め込む方法

実際の手順をもとにきれいなサイズ感で埋め込む方法をまとめます。

• ショート動画を挿入したいワードプレスの場所に段落を作る
• 「カスタムHTML」をオプションから選択する
• 「カスタムHTML」の空欄に定型CSSを入力する
• YouTubeへ飛び、埋め込みたいショート動画の再生ページまで進む
• 再生ページのURLをコピーして再びワードプレスに戻る
• 「カスタムHTML」に入力していた定型CSSの『src=”』の後に再生ページのURLを貼りつける
• 「カスタムHTML」のプレビューを押してきちんとショート動画が再現できれば成功