youtubeの埋め込み

youtubeの埋め込みコードを適切な比率で埋め込む方法。

youtubeから埋め込みコードを取得


動画のページを表示、「共有」をクリックして、開いたダイアログの「埋め込み」をクリック


右下のコピーをクリックして埋め込みコードをコピーする。

HTMLを記述

<div class="iframe-wrapper">
<iframe width="560" height="315" src="https://www.youtube.com/embed/pjnKuhcfB6U" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

埋め込みコードを<div class=”iframe-wrapper”>~</div>で囲む。

CSSを記述

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

動画の比率は16:9なのでその比率になるようにpadding-bottomの数値を設定する。
9÷16=56.25%

親要素は幅100%なので、padding-bottom:56.28%; と設定する。
子要素を絶対位置で指定するため position: relative; を設定。
高さは0とする。

子要素iframeは絶対位置でtop, leftを0、幅高さを100%と設定する。

 

 

 

css:スマートフォンのスクロールバー

単にoverflow:autoの指定だけではスマートフォンでスクロールバーが表示されない問題

例ではクラス名は .scroll-bar を指定している
※各自の設定で変更の必要あり
webkit系のみ有効だが、safari, chromeで有効なので概ねカバーできるのだろう。

.scroll-bar{overflow-x:scroll;}
.scroll-bar img{max-width:initial;}

.scroll-bar::-webkit-scrollbar{height:10px;}
.scroll-bar::-webkit-scrollbar-track{background:#dddddd;}
.scroll-bar::-webkit-scrollbar-thumb{background:#2cc2e4;}

なぜかこの指定をしてもうまく表示されない事が多々あった。
何度か細かく指定しなおして(原因が不明だが)うまく表示された。

こちらのサイトを参考にした

CSSを使ってスクロールバーを表示させてみました