将YouTube视频缩小到响应宽度 [英] Shrink a YouTube video to responsive width

问题描述

我在我们的网站上嵌入了YouTube视频，当我将屏幕缩小为平板电脑或手机大小时，它停止缩小的宽度约为560像素。这是YouTube视频的标准，还是我可以在代码中添加一些内容，以使其变得更小？

I have a YouTube video embedded on our website and when I shrink the screen to tablet or phone sizes it stops shrinking at around 560px in width. Is this standard for YouTube videos or is there something that I can add to the code to make it go smaller?

推荐答案

您可以使YouTube视频具有CSS响应能力。用 videowrapper类将iframe包裹在div中，并应用以下样式：

You can make YouTube videos responsive with CSS. Wrap the iframe in a div with the class of "videowrapper" and apply the following styles:

.videowrapper {
    float: none;
    clear: both;
    width: 100%;
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;
}
.videowrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.videowrapper div应该位于响应元素内。 .videowrapper上的填充是必要的，以防止视频崩溃。您可能需要根据布局调整数字。

The .videowrapper div should be inside a responsive element. The padding on the .videowrapper is necessary to keep the video from collapsing. You may have to tweak the numbers depending upon your layout.

这篇关于将YouTube视频缩小到响应宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！