jQuery視頻在不同設備上的高度和寬度？

所以我有一個視頻邊div，我打電話給它使用jquery，我的問題是我想要視頻填寫不同的屏幕尺寸div。jQuery視頻在不同設備上的高度和寬度？

這裏是我的代碼，

<script type="text/javascript"> 
    $(document).ready(function(){ 
    $('#viddiv').append('<video src="1.mp4" type="video/mp4" loop="loop" autoplay="autoplay" </video>');` 
    }); 
    </script> 
    </head> 
    <body> 
    <div data-role="page"> 
    <div data-role="header"> 
     <h1>My Title</h1> 
    </div> 
    <div data-role="content"> 
     <div id="viddiv"> 
     </div> 
    </div> 
    </div> 

    </body> 
    </html>

我的CSS

@charset "UTF-8"; 
video { 
    height:100%; 
    width:100%; 
} 

@media only screen and (max-width: 1024px) { 
    #viddiv { 
     height: 768px; 
     width: 1024px; 
     background-color:#FF0; 
      }  
} 
@media only screen and (max-width: 768px) { 

    #viddiv { 
     height: 1024px; 
     width: 768px; 
     background-color:#00F; 
      } 
} 
@media only screen and (max-width: 640px) { 

    #viddiv { 
     height: 480px; 
     width: 640px; 
     background-color:#0F0; 
      } 
} 
@media only screen and (max-width: 320px) { 

    #viddiv { 
     height: 480px; 
     width: 640px; 
     background-color:#F00; 
      } 
}

真的不能做出來我敢肯定如初，這是很容易做到。

任何幫助將是偉大的！

來源

2013-05-27 user2295669

你可以做這樣的事情：

$('#viddiv').append('<video src="1.mp4" type="video/mp4" loop="loop" autoplay="autoplay" </video>') 
.css({"width":screen.width, "height":screen.height});

jsfiddle

來源

2013-05-27 11:59:03 cube

由於其在Dreamweaver製作視頻小當我預覽它，但無法在Chrome :(想我會需要真正得到它看看它的外觀 - 非常感謝 – user2295669

歡迎您，您也可以接受答案.--) – cube

jQuery視頻在不同設備上的高度和寬度？

回答

相關問題