如何使 YouTube 嵌入视频成为整页宽度的视频? [英] How to make a YouTube embedded video a full page width one?
本文介绍了如何使 YouTube 嵌入视频成为整页宽度的视频?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
这是代码的小提琴:http://jsfiddle.net/dLPa8/
如果您向下滚动,就会看到从 YouTube 嵌入的视频.我需要它,它应该覆盖整个页面的高度和宽度.我的意思是它应该看起来有点像第一部分(在小提琴中).
If you scroll down, there's a video embedded from YouTube. What I need it, it should cover the full page height and width. I mean it should appear somewhat like the first section (in the fiddle).
我试过了:
<iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"></iframe>
它在一定程度上解决了问题,但是使用上面的iframe
,视频会粘在页面顶部.如何将视频部分高度设为整页高度?
It solved the problem to a certain extent, but the video clings to the top of the page using the above iframe
. How can I make the video section height the full page height?
推荐答案
这是一个FIDDLE
<iframe id="video" src="//www.youtube.com/embed/5iiPC-VGFLU" frameborder="0" allowfullscreen></iframe>
$(function(){
$('#video').css({ width: $(window).innerWidth() + 'px', height: $(window).innerHeight() + 'px' });
// If you want to keep full screen on window resize
$(window).resize(function(){
$('#video').css({ width: $(window).innerWidth() + 'px', height: $(window).innerHeight() + 'px' });
});
});
这篇关于如何使 YouTube 嵌入视频成为整页宽度的视频?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文