How do I make this Div Scalabe with resolutions/browser
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 my website
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://w开发者_开发技巧ww.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
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?).
加载中,请稍侯......
精彩评论