css youtube 水平和垂直嵌入流体

Question

是否可以使用纯 css 使 youtube 嵌入在水平和垂直方向上都流畅？

基本上这意味着无论父级的宽度/高度如何，视频纵横比始终保持不变。例如，如果父 div 很宽很短，视频的两边就会有空隙。如果 parent 又瘦又高，则视频的顶部和底部会有间隙。

Answer 1

我就是这样做的，向http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php致意

DEMO

<div class="thumbnailContainer video_embed">
    <iframe src="//www.youtube.com/embed/Kdgt1ZHkvnM?rel=0" frameborder="0" allowfullscreen></iframe>
    </div>

        .thumbnailContainer
        {
            overflow: hidden;
            position: relative;
            width: 100%;
        }

        .thumbnailContainer.video_embed
        {
            position: relative;
            padding-bottom: 56.25%;
            padding-top: 30px;
            height: 0;
            overflow: hidden;
        }

        .thumbnailContainer.video_embed iframe
        {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }