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でも綺麗に表示されます。
もう、お気づきかと思いますがこのブログではなく
https://mirrorofes.com/esnomy/
上記のフリーBGM素材ページの表示を例にしています。
というのも今使っているワードプレステーマとプラグインの場合、埋め込みコードをそのまま貼り付けてもちゃんとスマホのサイズに合わせて表示してくれるのでいちいちこんな面倒なことしなくて良いのです😓
フリーBGM素材のほうはワードプレスではなくCSSとhtml5で記述しているのでこういった知識は必要になるのです。
100%はいろいろ応用できる
例えば楽天のウィジェット。
楽天の場合は、
rakuten_size=”100%
に変えるだけで各スマホに対応できてしまいます。
他にもこの方法で各スマホの画面に合わせてレスポンシブ対応できる場合が多々あるのでぜひ試してみてくださいね♪
余談ですが、このワードプレステーマとプラグインでは
<pre><code> ここにhtml構文が入る </code></pre>
を使わなくてもコードをページに表示記述できてしまいます。
便利すぎますw
