【Youtubeやvideoタグで上下左右に黒い余白ができてしまう】| コーディングの悩み解決
Contents
Youtubeやvideoタグで上下左右に黒い余白ができてしまう
最近、どこのサイトでも、当たり前のように動画が利用されるようになってきました。
本記事をお読みの方も、自分たちのサイトに埋め込む作業をしている方も多くいらっしゃると思います。
そんな折、知り合いから「動画をサイトに設置したら、上下に黒い余白ができてしまったが消すことができない」という相談がありました。
もしかしたら、他にもそのような悩みを持っている方がいるかもしれないと思い、今回、「Youtube動画や、videoタグ」にて上下左右に黒い余白ができてしまう現象の解決方法を、参考までに載せようと思います。
パソコンはもちろん、スマートフォンなど、レスポンシブにも対応している方法ですので、ぜひ、試してみてください。
HTMLの参考
HTMLの参考です。（Youtubeの場合は「iframe」、直接動画を埋め込む場合は「video」タグを適宜使用してください）
「YouTubeの場合」
|
1 2 3 4 5 6 |
<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> |
「videoタグの場合」
|
1 2 3 4 5 6 |
<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> |
CSSの記述
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
.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%; } |
解決できましたら幸いです。それでは、良いコーディングライフを＾＾
投稿者プロフィール
-
【茨城県】ｅスポーツ産業創造戦略検討調査
【茨城県】観光推進事業
【esports Japan】運営責任者
【日本Web大賞!受賞】
「eスポーツ」「デザイン」「プログラミング」「記事執筆」「動画作成」「コンサルタント」などを担当しております。
