所以我在 div 旁边有一个视频，我使用 jquery 调用它，我的问题是我希望视频在不同的屏幕尺寸上填充 div。
这是我的代码，
<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;
}
}
真的无法解决，我确信这很容易做到。
任何帮助都会很棒！