2019.02.07YouTubeなどの動画をWordPressに埋め込むと、スマホでみたときに「あれ?」と思うことがあります。パソコンでは普通にみえていたはずの動画が、やたら縦長になっていたりします。これは、スマホなどの「画面の幅が狭い端末」で起こる現象で、ちょっとした工夫をすることで対策できます。いうわけで今回は、YouTubeなどの埋め込み動画をレスポンシブ対応にする方法をお届けします。埋め込み動画をレスポンシブ対応にする方法CSSにコードを貼ってみよう記事に動画を埋め込んでみようまとめ埋め込み動画をレスポンシブ対応にする方法やり方はとってもかんたんですよ!今回の方法では、画面の幅が変わっても「動画の比率を変わらないようにする」ことで対応します。いわゆる「レスポンシブ対応」のことで、CSSを使って行います。CSSにコードを貼ってみようまずは次のコードをスタイルシートに貼ります。height:100%;}コード内の「画面の比率によって変えます」のところは、動画の画面比率によって次のように変更します。16:9の動画:56.25%4:3の動画:75%16:10の動画:62.5%ちなみに、上のコード例では、75%(画面比率4:3の場合)になっています。YouTubeの場合は、56.25%(16:9)だとちょうどよくなります。コードをスタイルシートに貼りつけたら、さっそくWordPressの記事に動画を埋め込んでみましょう。記事に動画を埋め込んでみようWordPressに動画を貼るときは、YouTubeなどで取得した「埋め込み用のコード」をそのまま貼るのではなく、次のようにします。今回の動画でしたらこれが埋め込み用のコードです。これをWordPressに貼るときは、次のようにします。<div>タグの間に「動画の埋め込み用のコード」を入れるだけですね。これを動画を埋め込みたいところに貼りつければOKです。ビジュアルではなく、テキストエディタのほうに貼りつけます。するとこのように、スマホなどの画面の幅が狭い端末でも、同じ比率でみることができます。まとめ今回は、YouTubeなどの埋め込み動画をレスポンシブ対応にする方法をお届けしました。紹介したコードはこちらの記事を参考に組ませていただきました。レスポンシブ表示は、パソコンでみているとなかなか気づきにくい部分かと思います。よかったら参考にしてみてくださいね。/YouTubeを使わずにWordPressに動画を埋め込む方法YouTubeにアップした動画は、WordPressにかんたんに埋め込むことができます。「YouTubeを経由させるのはちょっと・・・」という方もいるかと思います。そこで今回は、YouTu...yuzuyu3.comまた、記事内で紹介した動画は「ゆっくりMoviemaker」を使って作っています。/ゆっくり実況をつくってみようよかったら参考にしてみてくださいね。動画TwitterFacebookはてブPocketLINEコピーゆずゆをフォローするこの記事を書いた人ゆずゆ読むと、ちょっぴり役に立つ&たのしくなるコンテンツを発信しています。