I'm trying to display a video inside a div using jQuery, but the issue I'm facing is that I want the video to adapt and fill the div based on different screen sizes.
Below is my code:
<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>
And my 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;
}
}
I'm struggling with this and it seems like it should be an easy fix. Any help would be greatly appreciated!