WordPressテーマの「Cocoon」でYoutube動画を埋め込んでいた時に「横幅いっぱいに表示させたいのにサイズが変更できない」「レスポンシブにできない」事象に遭遇して、参考になるWebサイトがなかなか発見できずに解決までに時間を要してしまったので、対処方法を記事にします。この記事が誰かの役に立てば幸いです。
■やりたかったこと
やりたかったことは以下の2点でした。
- 記事に埋め込んだYoutube動画を、スマホで閲覧しても画面からはみ出ることなくスマホの最適サイズで表示させたい（レスポンシブ対応にしたい）
- 記事に埋め込んだYoutube動画を、記事の横幅いっぱいに表示させたい。
■解決方法
結論を先に書きます。僕の場合は以下の方法で解決しました。
- 僕の使用した「Cocoon」の場合は自動でレスポンシブになっていた。
- CSSクラス .video-containerの設定を変更することで横幅いっぱいに表示するようになった。
■一般的な解決方法
Web検索すると、下記のような解決方法が数多く見つかります。僕も他所でブログ書いてた時は下記の方法で対処していました。
■CSSを使用する場合
以下のCSSクラスをスタイルシート (style.css)に記述します。
.youtube{
position: relative;
width: 100%;
padding-top: 56.25%;
}
.youtube iframe{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}作成したyoutubeクラスでyoutube動画のiflameタグを囲みます。
<div class="youtube">
<iframe width="560" height="315" src="https://www.youtube.com/embed/HuEPbDAyoXw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
padding-topにYouTubeのアスペクト比（比率）を指定する事で、画面幅に合わせて埋め込みが可変します。
アスペクト比の幅に対する高さの比は、「高さの比率 ÷ 幅の比率 × 100」の計算式で求められます。
YouTubeのアスペクト比が「16:9」なので、この式で計算すると9÷16×100=56.25％になります。
このように記述することにより、記事の横幅いっぱいにYoutube動画を表示させることと、スマホなどサイズが違うブラウザでも自動的に横幅いっぱいに表示させることができます。
■CSSを使用しない場合
上記は以下のようにHTMLコードを記述することで、CSSを使わなくても実現できます。
<div style="width:100%; padding-top: 56.25%; position:relative;">
<iframe width="100%" height="100%" max-width="1280px" style="position: absolute; top: 0; left: 0;" src="https://www.youtube.com/embed/HuEPbDAyoXw" scrolling="no" frameborder="0" allowfullscreen>
</iframe>
</div>僕の場合、CSSクラスが使いにくいサイトでブログをやっていたので、上記の方法を使っていました。
■「Cocoon」で一般的な解決方法が通用しなかった理由
記事をプレビューして、記事のHTMLソースを見たら理由は一目瞭然でした。Youtubeのiflameタグを記述すると、「Cocoon」が勝手にCSSクラスを付加してしまっていました。これでは、一般的な解決方法が通用しないのは当然です。
<div class="video-container">
<div class="video">
<iframe width="100%" height="100%" max-width="1280px" style="position: absolute; top: 0; left: 0;" src="https://www.youtube.com/embed/HuEPbDAyoXw" scrolling="no" frameborder="0" allowfullscreen="">
</iframe></div></div>
上記のようにiflameタグが、２つのクラスで勝手に囲まれてしまっていました。
ちなみに、「Cocoon」で一般的な解決方法を適用してしまうと、Youtube動画の上に不自然な空白エリアができて、Youtube動画も横幅いっぱいにはならないかなりかっこ悪い状態になってしまっていました。
■「Cocoon」での解決方法
この勝手に付加されるCSSクラス .video-container について調べてみたら、これにより自動的にレスポンシブ対応になるが、 max-width: 640px; margin: 30px 0; が初期設定されているため、横幅いっぱいに表示されないことがわかりました。このCSSクラスにより、iframeタグでwidthにより横幅を指定しても、全く効かず固定で横幅が640pxになってしまっていたのでした。
横幅いっぱいに表示する場合は、スタイルシート (style.css)に以下を記述することで実現できました。
.video-container {
max-width: none;
}この対応により、以降は記事にYoutube動画のiflameタグを貼り付けるだけで、僕のやりたかったことが実現できるようになりました。
■今回の教訓
今回のことから僕は以下の教訓を得ました。
CSSが効かない場合は、まず生成されたHTMLコードを確認すべし
今回の事象に遭遇した時僕はネットをググることばかり考えてしまったのですが、まず生成されたHTMLコードを確認していれば、YoutubeのiflameタグにCSSクラスが勝手に付加されていることに気付けて、そこに付加されたCSSクラス .video-containerについてネット検索すれば、もっと早く解決策にたどり付くことが出来たと思いました。今回の教訓は次に同じような問題に遭遇した時に活かしたいです。
コメント