WordPressサイドバーにYouTube画像をサイズ指定で埋め込む方法

こんにちは、フルタニです。放送局で番組作りをしてました。 WordPressサイドバーを書きます。

この「ぶいろぐ」では、トップページのサイドバーにYouTube動画枠を二つつけています。

「どうやったらサイドバーにYouTube画像を置くことができるのか」という問い合わせを受けたので、その方法をご紹介します。

WordPressの[メディア]にごく短い動画を置くことはできます。

しかし、動画ファイルは重いのでサーバーを圧迫したりするため推奨できません。

動画を置くならURLを貼り付けて再生してもらう方がメリットが大きいのです。

最新のWordPressはブロックエディタが導入されています。

投稿画面のブロックの[追加]から[埋め込み][YouTube]を選択するとYouTube動画を記事の中に埋め込むことができます。

ではサイドバーにYouTubeを表示させるにはどうしたらいいのでしょうか。

いちばん簡単な方法は、[ウィジェット]から[メインサイドバー]のウィジェット追加で[HTML]を追加。追加した[HTML]にYouTubeURLを貼り付ける方法です。

URLの貼り付けは、ブラウザのアドレスバーに表示されるURLでも共有用の短縮URLでも可能です。

ただしこの方法だとサムネイルの両脇が欠けます。気になる場合は縦横比を指定するといいと思います。

画面のサイズを指定したい時は

YouTubeの動画ページより取得したiframeタグを使うことで埋め込み表示するYouTube動画の幅と高さのサイズ指定ができます。

iframeタグは動画の下にある[共有][埋め込む]をクリックすると現れるEmbed Videoという枠の中に表示されます。

ショートコードにあるwidthおよびheightの数値はお好みの値に変換できます。

WordPressサイドバーの横幅はだいたい160px位なので縦は90pxとします。

このコードを[外観][ウィジェット][カスタムHTML]にペーストしての配置すればサイドバーに追加できます。

YouTubeを埋め込むプラグインもいくつか出ています。

ただしプラグインを使うと動作が重くなるので注意が必要です。

サイドバーにYoutube動画をウィンドウサイズなどを変更できるプラグインがあります。

「Simple YouTube Responsive」です。

デフォルトの埋め込みとは違いサイズ変更や画面比率など自由が聞くのでブログのイメージを崩さずに使えます。

こちらも参考にしてみてください。