web-dev-qa-db-ja.com

YouTube埋め込みiFrameのブラックバーを無効にする

YouTubeから自分のWebページにビデオを埋め込みます。黒いバーのない画面で100％ストレッチしたいと思います。幅は100％にしていますが、ビデオの両側にいくつかの黒いバーがあります。どうすればそれを取り除くことができますか？

スクリーンショット： Screenshot スニペット： https://jsfiddle.net/o3rp6an9/1/

<div id="video">
    <iframe width="100%" height="100%" src="https://www.youtube.com/embed/zWAiQJvwb8Q?autoplay=1&loop=1&controls=0&rel=0&showinfo=0&playlist=zWAiQJvwb8Q&modestbranding=1" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
</div>

#video {
    height:100%;
    width:100% !important;
    background-size:100% 100%;
    position:relative;
    overflow:hidden;
}

これについては別の質問がありますが、基本的には役に立ちませんでした。

htmlcssiframeyoutube
6
Ümit Aparı

動画のアスペクト比に一致する垂直方向のパディングを設定するラッパー内に動画を絶対的に配置したいとします。パディング/アスペクト比を取得するには、ビデオの高さを幅で割り、100を掛けてパーセンテージを求めます。

* {padding:0;margin:0;box-sizing:border-box;}
#video {
        position: relative;
        padding-bottom: 56.25%; /* 16:9 */
        height: 0;
}
#video iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
}
<div id="video">
                <iframe width="100%" height="100%" src="https://www.youtube.com/embed/zWAiQJvwb8Q?  autoplay=1&loop=1&controls=0&rel=0&showinfo=0&playlist=zWAiQJvwb8Q&modestbranding=1" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
</div>
13
Michael Coker