油彩画家 仲 浩克 の公式サイト
2020-11-22

WordPressブログでYouTubeをレスポンシブデザイン(スマホに対応)にする方法

WordPressのブログに関してなんだけど、いままでYouTube埋め込みするのにYouTube側でその動画のHTML取得して、それをそのままブログ上に貼り付けしていた。

それで、一応、ブログ上にYouTube埋め込みができたのだけど、それだと、自分のWordPressのテーマでは、レスポンシブ対応(スマホ対応)になってなかったのです。大体スマホでブログ読むときは縦で見ると思うのですが、YouTubeは横なのでYouTubeの画面の右左が切れて、見にくい画面になってた。再生すると、上下に黒幕がでて、見ることはできるんですが…。だからデザイン上埋め込みやめようかどうしようかと思ったら、いいやつ見つけました。紹介します。

Embed Responsivelyっいうやつで貼付けコードを発行すると、その発行されたHTMLでブログに埋め込むとレスポンシブ対応になることがわかった。簡単な方法で便利ですね。

YouTube埋め込みしてみた

上が今までのもので、下がレスポンシブ対応になってます。縦向きのスマホでも全貌が最初から見えます。上のままで良いといえば良いのかもしれませんが…。私は下の方が見やすいです。

by
関連記事