将 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?
推荐答案
您可以使用 CSS 使 YouTube 视频具有响应性.使用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屋!