Change video tag attributes depending on device width (JQuery/Javascript)

Question

I have a video tag that needs to have the attributes loop and autoplay on desktops and just the controls and a poster attribute on mobile devices (around 767 pixels). How to I have the video have specific attributes depending on device width? I would like to have it vary depending on devices because many mobile devices to not respond well with the autoplay attribute. Here is some code that may better illustrate what I want to do:

//Here, I would like to do something like this:

document.addEventListener("DOMContentLoaded", function(event) {
  //for mobile
  if ($(window).width() < 767) {

    var video = $('#video').get(0);

    $('#video').removeAttr('autoplay');
    $('#video').removeAttr('loop');
    //either that or set attributes here like this:
    //$('#video').attr('controls', 'controls');
    //$('#video').attr('poster', 'poster');


  }
  // Desktops/tablets
  else if ($(window).width() > 767) {
    $('#video').attr('autoplay', 'autoplay');
    $('#video').attr('loop', 'loop');


  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<video id="video" autoplay="autoplay" loop="loop" poster="images/video.jpg">
  <source src="video.mp4" type="video/mp4" />
  <source src="video.webm" type="video/webm" />
  <img src="images/video.jpg" height="500" style="width: 100%;" />
</video>

How do I go about doing this (I've tried the code above, and then some and I wasn't able to get anything working)? Also is it best to just not specify any code at all in the HTML and just set it in the javascript or just remove it depending on context. Thank you.

P.S. I rather not use Media Queries...

Check out http://stackoverflow.com/questions/11381673/detecting-a-mobile-browser - I think you will find some interesting methods — Dex Dave, May 13 '15 at 22:47
Thank you, I found what I was looking for (although it did take me awhile). — Bastian, May 14 '15 at 17:58

Bastian · Answer 1 · 2015-05-15T17:54:41.863

I was able to solve this by adding all the controls manually in the HTML and simply removing the desired control depending on the type of device. Here is some code:

function load() {
            var video = document.getElementsByTagName('video')[0];

             if (navigator.userAgent.match(/Android/i)
 || navigator.userAgent.match(/webOS/i)
 || navigator.userAgent.match(/iPhone/i)
 || navigator.userAgent.match(/iPad/i)
 || navigator.userAgent.match(/iPod/i)
 || navigator.userAgent.match(/BlackBerry/i)
 || navigator.userAgent.match(/Windows Phone/i)
        ) {
               //This is if the device is mobile
                video.removeAttribute('autoplay');
                video.removeAttribute('loop');
            }
            else {
                //anything other than mobile (i.e. Desktop)
                video.removeAttribute('controls');
            }

        }

  <video controls="controls" autoplay="autoplay" loop="loop" poster="images/video.jpg" onloadstart="load()">
        <source src="images/video.mp4" type="video/mp4" />      
        <source src="images/video.webm" type="video/webm" />
        <p>Hello!?!?!?</p>
        <img src="images/video.jpg" />
    </video>

Change video tag attributes depending on device width (JQuery/Javascript)

1 Answers1