Youtubeなどの埋め込みをスマホ画面に最適なサイズへ可変するレスポンシブ化の方法

Youtubeから取得する埋め込みコード

まずはYoutubeから埋め込みコードを取得しましょう
今回は試しに私の動画を元に説明していきます😊

上記の動画のコードを取得するには下記の通りに進みます

画面下右端にある 共有 を押します

出てきた画面の左端 埋め込む を押します

右端下にある コピー を押します

さて、そうするとクリップボードに

<iframe width="560" height="315" src="https://www.youtube.com/embed/ZnB2xAHTSwA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>  

がコピーされますね。

これをそのまま貼り付けてしまうとサイト設計の仕方によってはそのまま横幅560px縦幅315pxで表示されてしまいます。

PCでは問題ない幅ですがスマホでは縦持ちだとはみ出てしまうことが。

スマホ、PCともに美しいサイトレイアウトを目指したいところ。

Youtubeで取得したコードを一部改変

下記のように改変します。

改変箇所は
width=”560″

width=”100%”
にするだけです。

<iframe width="100%" height="315" src="https://www.youtube.com/embed/ZnB2xAHTSwA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>  

するとどうでしょう。どんなスマホでもPCでも綺麗に表示されます。

↑width=”560″のときのiPhoneの縦持ち表示
↑100%のときののiPhone縦持ち表示

もう、お気づきかと思いますがこのブログではなく
https://mirrorofes.com/esnomy/
上記のフリーBGM素材ページの表示を例にしています。

というのも今使っているワードプレステーマとプラグインの場合、埋め込みコードをそのまま貼り付けてもちゃんとスマホのサイズに合わせて表示してくれるのでいちいちこんな面倒なことしなくて良いのです😓

フリーBGM素材のほうはワードプレスではなくCSSとhtml5で記述しているのでこういった知識は必要になるのです。

100%はいろいろ応用できる

例えば楽天のウィジェット。

楽天のウィジェットも100%表示でレスポンシブ対応できる

楽天の場合は、

rakuten_size=”100%

に変えるだけで各スマホに対応できてしまいます。

他にもこの方法で各スマホの画面に合わせてレスポンシブ対応できる場合が多々あるのでぜひ試してみてくださいね♪

余談ですが、このワードプレステーマとプラグインでは
<pre><code> ここにhtml構文が入る </code></pre>
を使わなくてもコードをページに表示記述できてしまいます。
便利すぎますw

Follow me!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です