CODEWITHSUNDEEP
javascriptjqueryhtmlvideoresize
purple11111
purple11111

Reputation: 719

Responsive Video Window resize (possible js / jquery conflict)

I have a module wherein a user can select which video file to play for the smartphone, tablet and desktop. Let's say the user uploads three different videos.

When you go to the site(local) it loads the appropiate file according to screen size so the document ready code is working. But when you manually resize the browser window it should listen to the code in the .resize event.

<script>
$(document).ready(function() {

var viewportWidth = $(window).width();

if (viewportWidth < 767) {
  document.write('video');
} else if (viewportWidth < 979) {
  document.write('video');
} else if (viewportWidth > 980){
  document.write('video');
}
}());   

$(window).resize(function() {

var viewportWidth = $(window).width();

if (viewportWidth < 767) {
  document.write('video');
} else if (viewportWidth < 979) {
  document.write('video');
} else if (viewportWidth > 980){
  document.write('video');
}
}());   
</script>

So I probably messed up the coding ;-)... And I believe it could be even shorter by on resize activate doc. ready function. I removed the very long code sections in the doc.write and just filled in 'video' because the codes in there where not relevant and would only add to confusion. I know this code is not showing a video as is.

I already tried numerous SO ideas and from other Google Result pages. But none seems to work. Even tried a code from back in the day which did do the video but it disabled other native CMS functions so deleted that one.

The Question:

How to make the below code execute every time the browser window is resized?

$(document).ready(function() {

var viewportWidth = $(window).width();

if (viewportWidth < 767) {
  document.write('video');
} else if (viewportWidth < 979) {
  document.write('video');
} else if (viewportWidth > 980){
  document.write('video');
}
}());

Upvotes: 0

Views: 350

Answers (1)

Chizzle
Chizzle

Reputation: 1715

Use jQuery resize() Here is a fiddle with the resize working: https://jsfiddle.net/b6fncgwg/

The key is using .html() to change the html of your background/video div.

$(window).resize(function () {
    changeBackground();
});

changeBackground();

function changeBackground(){
    var viewportWidth = $(window).width();

    if (viewportWidth < 767) {
        $("#video-bg").html('<video autoplay nomuted loop preload="none" poster="http://research.loginsecuretest.eu/loginsecurecmp/background//images/clientvideos/small.jpg" id="bgvid-SMARTPHONE"><source type="video/mp4" src="http://research.loginsecuretest.eu/loginsecurecmp/background//images/clientvideos/small.mp4"><source type="video/webm" src="http://research.loginsecuretest.eu/loginsecurecmp/background//images/clientvideos/small.webm"><source type="video/ogg" src="http://research.loginsecuretest.eu/loginsecurecmp/background//images/clientvideos/small.ogv">');
    } else if (viewportWidth < 979) {
       $("#video-bg").html('<video autoplay nomuted loop preload="none" poster="http://research.loginsecuretest.eu/loginsecurecmp/background//images/clientvideos/SampleVideo_1080x720_1mb.jpg" id="bgvid-TABLET"><source type="video/mp4" src="http://research.loginsecuretest.eu/loginsecurecmp/background//images/clientvideos/SampleVideo_1080x720_1mb.mp4"><source type="video/webm" src="http://research.loginsecuretest.eu/loginsecurecmp/background//images/clientvideos/SampleVideo_1080x720_1mb.webm"><source type="video/ogg" src="http://research.loginsecuretest.eu/loginsecurecmp/background//images/clientvideos/SampleVideo_1080x720_1mb.ogv"></video>  <!--    Buttons or metadata go here -->');
    } else if (viewportWidth > 980) {
       $("#video-bg").html('<video autoplay nomuted loop preload="none" poster="http://research.loginsecuretest.eu/loginsecurecmp/background//images/clientvideos/jaguar_video1.jpg" id="bgvid-DESKTOP"><source type="video/mp4" src="http://research.loginsecuretest.eu/loginsecurecmp/background//images/clientvideos/jaguar_video1.mp4"><source type="video/webm" src="http://research.loginsecuretest.eu/loginsecurecmp/background//images/clientvideos/jaguar_video1.webm"><source type="video/ogg" src="http://research.loginsecuretest.eu/loginsecurecmp/background//images/clientvideos/jaguar_video1.ogv"></video>  <!--    Buttons or metadata go here');
    }
}

Upvotes: 2

Related Questions