如何使用分辨率/浏览器制作这个 Div Scalabe
我的网页背景有一个全屏视频，它是一个包含在 div 中的 YouTube 视频。
当以小于 1080p 的分辨率（例如 1280x720）查看时，它不会移动并在浏览器中包含其形状。相反，它会保持相同的 1080p 尺寸，而不是缩小以随用户拥有的任何分辨率/浏览器移动。
这是有问题的代码。
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.metadata.js"></script>
<script type="text/javascript" src="jquery.mb.YTPlayer.js"></script>
<script type="text/javascript">
$(function(){$(".movie").mb_YTPlayer();});
</script>
</head>
<body>
<div id="container" style="position:absolute; left:0px; top:0px; z-index:-1; width:100%; height:100%;"> </div>
<a id="bgndVideo" href="http://www.youtube.com/watch?v=8Pe8VFshHY8" class="movie {opacity:1, isBgndMovie:{width:'1990',mute:false}, ratio:'16/9', ID:'container'}"> Your browser dose not support video backgrounds </a> urban_editing_dot_com_test_page</h1>
</body>
</html>
非常感谢你提前
I have a full screen video for my webpage background which is a youtube video contained within a div.
When its viewed in a smaller resolution than 1080p (eg 1280x720) it doesnt move and contain its shape with the browser.. instead it stays the same 1080p size rather than shrinking to move with whatever resolution/browser the user has.
here is the code in question.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.metadata.js"></script>
<script type="text/javascript" src="jquery.mb.YTPlayer.js"></script>
<script type="text/javascript">
$(function(){$(".movie").mb_YTPlayer();});
</script>
</head>
<body>
<div id="container" style="position:absolute; left:0px; top:0px; z-index:-1; width:100%; height:100%;"> </div>
<a id="bgndVideo" href="http://www.youtube.com/watch?v=8Pe8VFshHY8" class="movie {opacity:1, isBgndMovie:{width:'1990',mute:false}, ratio:'16/9', ID:'container'}"> Your browser dose not support video backgrounds </a> urban_editing_dot_com_test_page</h1>
</body>
</html>
thank you so much in advance
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
首先，清理你的标记，有一些错误，比如无用的关闭 h1 和其中的空容器 div。标记错误通常是导致意外行为的原因。
接下来，尝试从 http://pupunzi.com/mb 复制示例.components/mb.YTPlayer/demo/demo_background.html。
选项哈希中的
{width: 'window'}以及容器的正确设置（也许您可以省略它？）。First, clean up your markup, there are errors like a useless closing h1 and an empty container div in it. Markup errors often are the cause for unexpected behaviors.
Next, try to copy the example from http://pupunzi.com/mb.components/mb.YTPlayer/demo/demo_background.html.
{width: 'window'}in the options hash together with correct settings for the container (maybe you can omit it?).