0

このページでは、埋め込まれた YouTube ビデオが「Similar Festivals」というタイトルのカルーセルの左側に表示されます。YouTube ビデオの埋め込みに使用される HTML は次のとおりです。

YouTube セクションの HTML は次のとおりです。

<div class="span4 spacer youtube">
    <div class="title clearfix">
        <h2 class="pull-left">YouTube</h2>
    </div>
    <iframe width="1000" height="1000" src="http://www.youtube.com/embed/NI8rQEHoE24"></iframe>
</div>

ページのレイアウト (レスポンシブ Bootstrap グリッドを使用) は、ビデオがその右側のカルーセルと同じ高さになるようになっていますが、ご覧のとおり、親コンテナーから何らかの形で抜け出しています。ビデオをカルーセルの右側に揃えたいのですが、どうすれば修正できますか?

私が言及していることに疑問がある場合のスクリーンショットを次に示します。

ここに画像の説明を入力

4

2 に答える 2

1

row-fluidコンテナーが YouTube ビデオに 33% の幅を動的に追加していることに気付きました。したがって、設定した幅の期待値は、そのクラスによってリセットされます。

これを試して：

<div class="row-fluid">


    <div class="span4 spacer twitter">
    </div>


    <!-- Youtube -->
    <div class="span4 spacer youtube">
        <div class="title clearfix">
            <h2 class="pull-left">YouTube</h2>
        </div>
<iframe height="150px" src="http://www.youtube.com/embed/NI8rQEHoE24"></iframe>        
    </div>

    <!-- Similar Carousel -->
    <div class="span4 spacer">

        <div id="similarCarousel" class="carousel slide last">
        </div>
    </div>

</div>

（エイリアン氏に敬意を表します）

iframe の高さのみを設定します。列流体容器全体がやや膨張し、高さが不規則です。ただし、「コンテナから飛び出す」問題はありません。

于 2012-12-16T14:48:43.373 に答える
1

それ以外の

<iframe id="fitvid811516"
    src="Festivals.ie%20_%20Electric%20Picnic%202012_files/NI8rQEHoE24.htm">
</iframe>

これを使って

<iframe width="640" height="360" 
    src="http://www.youtube.com/embed/NI8rQEHoE24?feature=player_detailpage" 
frameborder="0" allowfullscreen>
</iframe>

幅と高さを手動で調整します。iframe は、動的なサイズ変更には適していません。

また、レイアウトを壊したくないが、内容を変更したくない場合は、HTML で親コンテナーに移動して設定することもできます。overflow: hidden

.fluid-width-video-wrapper {
    overflow:hidden;
}

これによりレイアウトは修正されますが、iframe が破損することに注意してください。プレイコントロールが留まる下部は隠されます。

于 2012-12-16T15:02:44.583 に答える