群馬県自閉症協会

コードを追加することで埋め込み動画をレスポンシブ表示できるようになりました。

旧来は、PCで横幅いっぱいに埋め込んだ動画は、スマホで見ると両サイドが切れてしまって見切れていました。

逆に、スマホで横幅いっぱいになるようにすると、PCでは寸足らずになっていました。

今回のコードを利用いただくと、寸足らずや見きれることがなく、PCでもスマホでも、横幅いっぱいに表示することが可能になります。

コードの例

<div class=”box_youtube”>
<iframe width=”100%” height=”560″ src=”https://www.youtube.com/embed/~~~”></iframe>
</div>

 

レスポンシブ表示させる方法

①埋め込みたいYouTubeの埋め込みURLをコピペ

<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/2oGNZHP1DWI?si=AkEdxa5w4G0_o3dw” title=”YouTube video player” frameborder=”0″ allow=”accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share” referrerpolicy=”strict-origin-when-cross-origin” allowfullscreen></iframe>

 

 

②iframeタグの前後にCSSのタグを追加

<div class=”box_youtube”>
<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/2oGNZHP1DWI?si=AkEdxa5w4G0_o3dw” title=”YouTube video player” frameborder=”0″ allow=”accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share” referrerpolicy=”strict-origin-when-cross-origin” allowfullscreen></iframe>
</div>

グレーの部分をコピペします

③iframeタグのサイズ表記を変更

ここに文字を入力<div class=”box_youtube”>
<iframe width=”100%” height=”420″ src=”https://www.youtube.com/embed/~~~”></iframe>
</div>

グレーの部分を上記の表記に変更します

widthは常に”100%”

動画の横縦比が4：3の場合、　heightは”420″がちょうどいいです。

横縦比16：9は試していないので、手探りで調整していただけると助かります。

※WordPressのビジュアルエディタ上の表示はおかしくなりますが問題ありません。プレビューでご確認ください。