You Tubeの埋め込み（iflame）の際、画面サイズによって周囲に黒い枠組みが表示されてしまう。
これはyoutubeの画面サイズと完全一致しないとその現象が起こるらしい。（You Tubeの画面サイズでも表示されることはあるが・・・）
そこで、下記のCSSを追加する。
.video_container の56.25%は、縦横比率で、その分の余白を予め用意することで、画像が収まるようにしている。
また、この記述のままだと、iflame で指定した画面サイズより優先されるため、横幅は現在のコンテンツエリアの横幅いっぱいになる。
そこで、.youtube-width クラスを設定し、その要素として youtube iflame を記述した。
今回の場合は、PCでは両脇20%のスペースを取り、スマホでは3%のスペースを取ったが、この部分は自由に設定可能。
@media (max-width: 750px) { .youtube-width{
margin-left:3%;
margin-right:3%;
}}
@media (min-width: 751px) { .youtube-width{
margin-left:20%;
margin-right:20%;
}}
.video_container{
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.video_container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}