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