「Blogger」YouTubeの動画をレスポンシブに対応させたい

「Blogger」のブログのデザインを変更していて、レスポンシブにしたら、埋め込んだ動画がはみ出てしまうことで悩んでいませんか？

PCで見る分には、特に問題なくても、スマホなどで見てみると、動画の大きさが変わらずに、はみ出したように表示され、折角デザインを変更したのに、これではちょっと不満ですよね。

今回は、とっても簡単にCSSを追加するだけで、動画をレスポンシブに対応させる方法を紹介したいと思います。

YouTubeの埋め込みタグを確認する

この方法は、動画の埋め込みタグを見るとわかるのですが、「iframe」タグを使用しており、この「iframe」に対して、CSSを記述する方法となります。

下の埋め込みタグは、YouTubeの自分の動画の埋め込みタグです。

<iframe width="560" height="315" src="https://www.youtube.com/embed/acSMUoR7nq0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

ご覧の通り、「iframe」のタグで囲まれていることがわかります。

iframeにCSSを指定する

投稿記事に、YouTubeの埋め込みタグを追加した後、Bloggerのテンプレートにある「HTMLを編集」をクリックして、以下のタグをCSS内に追加します。

iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
}

CSS内に追加する際、特にこの場所と言うものはありませんが、強いて言えば、「.post-body」などがある近くに、貼り付けるとわかりやすいかもしれません。

投稿記事をプレビューで確認する

さて、早速動画の大きさを下の埋め込み動画で確認してみます。

以下の動画は、上記のCSSを適用させているため、レスポンシブに対応し、ウィンドウサイズに合うようになっています。

追加したタグに「aspect-ratio: 16/9;」を追加しているため、アスペクト比を維持したまま、大きさが変わります。

今回紹介した方法の場合、ブログ内の動画すべてに適用されるので、とても簡単にレスポンシブ対応させることができます。

投稿した動画ごとに、CSSを変更するやり方ではないので、オススメの方法です。

注意点として、他に「iframe」を使用したタグがあると、動画とは無関係なコンテンツも影響してしまうことです。影響がないか確認してから、使用してみてください。