8

私が抱えている問題は、画面サイズに応じて、ビデオの両側または上部/下部に常に黒いバーが表示されることです。

ここに画像の説明を入力

迷惑な黒いバーを表示せずに常にフルスクリーンにする方法はありますか? プラグインを使用せずに。

これは私のマークアップです:

    <div id="full-bg">
        <div class="box iframe-box" width="1280" height="800">
            <iframe src="http://player.vimeo.com/video/67794477?title=0&amp;byline=0&amp;portrait=0&amp;color=0fb0d4" width="1280" height="720" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
        </div>
    </div>

    #full-bg{
        width: 100%;
        height: 100%;
        img{
            display: none;
        }
        .iframe-box{
            width: 100%;
            height: 100%;
            position: absolute;
            background: url(../img/fittobox.png);
            left: 0 !important;
            top: 0 !important;
            iframe{
                width: 100%;
                height: 100%;
            }
        }
    }
4

3 に答える 3

8

CSSに追加してみてください

.iframe-box {
    max-width: 1280px; /* video width */
    max-height: 720px; /* video height */
}

これは、要素がそれぞれ最大の高さまたは幅に達するまで、可能な限り拡張できることを意味しwidth: 100%; height: 100%ます。720px1280px

表示している画面の解像度が高い場合、ノードの拡大が停止し、黒い境界線が表示されなくなります。

さらに、以下は有効な CSS ではありません。ライブラリなどを使用していますか?

#full-bg {
    .iframe-box {
        foo: bar;
    }
}

回答が受け入れられた後に編集:これを達成するためのまったく別の方法を考えましたが、CSS の多くを変更する必要があります。

.fittobox {                /* give fit to box an aspect ratio */
    display: inline-block; /* let it be styled thusly */
    padding: 0;            /* get rid of pre-styling */
    margin: 0;
    width: 100%;           /* take up full width available */
    padding-top: 56.25%;   /* give aspect ratio of 16:9; "720 / 1280 = 0.5625" */
    height: 0px;           /* don't want it to expand beyond padding */
    position: relative;    /* allow for absolute positioning of child elements */
}

.fittobox > iframe {
    position: absolute;    /* expand to fill */
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}
于 2013-06-07T12:57:58.193 に答える