YouTube動画をレスポンシブに埋め込む

 あまた書かれているこの手の記事に、補足してもよさそうなところに気づきましたので書きます。  事の起こりとしては、自分のところのWebページ( https://template.kiwisoundworks.com/ )にYouTube動画を埋め込んでみたことです。YouTubeから手に入る埋め込みコードは、今、サイズが560px x315pxで固定なのですね。で、小さい画面で見ればはみ出すし、高解像度で小さい画面(最近のスマホとか)で見たら動画が小さいし、大きい画面で見ても大きく見えません(ここは、一概に困ったこととは言えませんが、私は困りました。)

 これをなんとかするための方策は、ちょっと検索するといくつも出てくるのですが、一番よく出回っているものはうちではうまくいきませんでした。

 この記事では備忘録を兼ねて、その解決策を。

うまくいった方法

CSS部分

.youtubecontainer{position: relative;height: 0;padding-bottom:56.25%;overflow: hidden;} .youtubecontainer iframe{position: absolute;top: 0;left: 0;width: 100% !important;height: 100% !important;}

HTML部分

<div class=”youtubecontainer”> <iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/liwFf0abqkg” frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe> </div>

※HTML部分のiframe内は、YouTube側から取得できるコードそのままです。

ポイントとしては

  • cssのiframeの幅と高さを指定するときに、 !importantを付けること。(力技であることは承知しつつ…手軽にするためにiframeの中に手を付けたくなかったので…)

また、本質的ではないですがおまけとして、

  • floatしていたりする場合は、直前で clear:both; しておく方が、動画を大きく出すなら、良いかもしれません。不本意に回り込んだ結果、画面からはみ出したりするかもしれませんし…。

以上です。


投稿日

カテゴリー:

投稿者:

タグ: