Question

所以我有一个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;
           }
}

真的无法解决这个问题，我确信这很容易做到。

任何帮助都会很棒！

Answer 1

您可以这样做：

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

jsfiddle

jQuery视频高度＆amp;不同设备的宽度？

1 个答案: