css youtube水平和垂直嵌入流体

Question

是否可以使用纯css使嵌入水平和垂直方向的youtube流体？

基本上这意味着无论父级的宽度/高度如何，都始终保持视频宽高比。例如，如果父div非常宽且短，则视频两侧都会有间隙。如果父母非常瘦而且很高，那么视频的顶部和底部会有间隙。

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%;
        }