WordPressにYouTubeショート動画をスマートに埋め込む方法!
1. はじめに
どもども、渡瀬です。今日お客様からYouTubeショートに動画をアップしたのでWordPressで作ったWebサイト上にアップしてほしいとの依頼がありました!
YouTubeショート(Shorts)は、スマートフォンで撮影・視聴されることを前提とした縦長動画(9:16)です。しかし、今までの通り動画の共有でURLを取得してWordPressに埋め込むと、デフォルトでは横長動画(16:9)で表示されて左寄せで配置されちゃいますよね。はっきり言ってめちゃめちゃカッコ悪いんですよ。
そこで本記事では、YouTubeショートをWordPressの記事にスマートに埋め込む方法と、縦長動画をセンターに配置する方法を分かりやすく解説します。(って言ってもめちゃめちゃ当たり前の簡単なことしか行っていませんか💦)
2. YouTubeショート動画をWordPressに埋め込む方法
方法:カスタムHTMLブロックで埋め込む(推奨)
- WordPressの投稿編集画面で「カスタムHTML」ブロックを追加
- 以下のコードを貼り付ける
<iframe width="315" height="560" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>
ここで最も重要なことは2つ!
1つ目はYouTubeショートのURLのshortの部分をembedに変更することです。shortのままだとうまく表示されません
◯ https://www.youtube.com/embed/VIDEO_ID
✕ https://www.youtube.com/short/VIDEO_ID
2つ目はサイズ( width="315" height="560" )の部分は、9:16になっていれば適時数値を変更することが可能なのであなたのWordPressのブロックに最適なサイズに変更してください。
この方法なら、縦長できれいにYouTubeショートが配置されます。
3. YouTubeショート動画をセンターに配置する方法
WordPressにYouTubeショート動画が配置されましたが、このままだと動画が左寄せになってますよね!それだとバランスが悪くてカッコ悪い場合が多いのでセンター合わせにします。
方法:カスタムHTMLブロックで中央寄せする
WordPressの「カスタムHTML」ブロックを使用する場合、以下のコードを使用して中央配置できます。
<div style="display: flex; justify-content: center;">
<iframe width="315" height="560" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>
</div>
以上でWordPressにYouTubeショート動画がきれいに配置されたと思います。
4. まとめ
- YouTubeショート動画はURLを貼るだけでも埋め込み可能
- 「/shorts/」を「/embed/」に変更するのを忘れない
- CSSやHTMLを使って中央寄せにすることで、縦長動画が綺麗に表示される
YouTubeショートをWordPressにかっこよく埋め込む方法を開設しました。
あなたのWordPressにYouTubeショートを見やすく配置することで、ユーザーにとって快適な視聴体験を提供しましょう!