29Sep2019

【Youtubeやvideoタグで上下左右に黒い余白ができてしまう】| コーディングの悩み解決

Contents

1 Youtubeやvideoタグで上下左右に黒い余白ができてしまう

Youtubeやvideoタグで上下左右に黒い余白ができてしまう

最近、どこのサイトでも、当たり前のように動画が利用されるようになってきました。

本記事をお読みの方も、自分たちのサイトに埋め込む作業をしている方も多くいらっしゃると思います。

そんな折、知り合いから「動画をサイトに設置したら、上下に黒い余白ができてしまったが消すことができない」という相談がありました。

もしかしたら、他にもそのような悩みを持っている方がいるかもしれないと思い、今回、「Youtube動画や、videoタグ」にて上下左右に黒い余白ができてしまう現象の解決方法を、参考までに載せようと思います。

パソコンはもちろん、スマートフォンなど、レスポンシブにも対応している方法ですので、ぜひ、試してみてください。

HTMLの参考

HTMLの参考です。（Youtubeの場合は「iframe」、直接動画を埋め込む場合は「video」タグを適宜使用してください）

「YouTubeの場合」

<div class="video_wrapper">

<iframe class="video_content" width="560" height="500" src="https://www.youtube.com/embed/LErQHiSomy4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>

</div>

</iframe>

</div>

<br />

「videoタグの場合」

<div class="video_wrapper">

[video class="video_content" width="1920" height="1080" mp4="https://elinks-group.com/wp-content/uploads/2019/09/countdown01.mp4"]
[/video]

</div>

[video class="video_content" width="1920" height="1080" mp4="https://elinks-group.com/wp-content/uploads/2019/09/countdown01.mp4"]

[/video]

</div>

CSSの記述

.video_wrapper {
   position:relative;
   width:100%;
   overflow:hidden;
   margin:auto;
   margin-bottom:8px;
}
.video_wrapper:before {
   content:"";
   display:block;
   padding-top: 53.88%;
}
.video_content {
   position:absolute;
   top:50%;
   left:50%;
   margin:auto;
   transform: translate(-50%,-50%);
   width:100%;
}

.video_wrapper {

position:relative;

width:100%;

overflow:hidden;

margin:auto;

margin-bottom:8px;

}

.video_wrapper:before {

content:"";

display:block;

padding-top: 53.88%;

}

.video_content {

position:absolute;

top:50%;

left:50%;

margin:auto;

transform: translate(-50%,-50%);

width:100%;

}

解決できましたら幸いです。それでは、良いコーディングライフを＾＾

投稿者プロフィール

E-LINKS

【茨城県公式】
・ｅスポーツ産業創造戦略検討調査業務　プロジェクトメンバー
・観光いばらき運営

【NHK水戸出演】
【無料動画素材サイト「ムビデコ」運営】
【もらって嬉しいプレゼント運営】
【E-LINKS代表】
【EWORKS株式会社取締役】
【日本Web大賞!受賞】

BLOG