Stop playing embedded video on specific resolutions

Question

I'm working on a website that contains two the same vimeo video's. One is for the larger screen resolutions for the < 1000px resolutions I want the video in another place. So I placed two of them in there, and with some CSS I controlled which of them is visible..

However, the videos need to get an autoplay on page load. While the display:none; css tag it will only hide the vids and not pause/disable the video.

Is there a good way to control this? At the moment I'm trying to do this with jQuery and Froogaloops but have not been able to get it working yet. This is what I got so far:

    jQuery(document).ready(function($) {

    var player = $("#82625501");
    froogaloop = $f(player[0].id);
    // Optimalisation: Store the references outside the event handler:
    var $window = $(window);

    function checkWidth() {
        var windowsize = $window.width();
        if (windowsize < 1000) {

             froogaloop.api('pause');

        }
        else {
             froogaloop.api('play');
        }
    }
    // Execute on load
    checkWidth();
    // Bind event listener
    $(window).resize(checkWidth);
});

This works only if you resize the screen, not on first load. How to do this? Or maybe there is an easier way? Thanks in advance!

Answer 1

Okay, so what you will probably want to do is change the autoplay parameter as outlined on Vimeo's embed API to '1' like so:

<iframe src="//player.vimeo.com/video/82527075?autoplay=1" width="500" height="209" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href="http://vimeo.com/82527075">The Awareness</a> from <a href="http://vimeo.com/user2354244">Henry</a> on <a href="https://vimeo.com">Vimeo</a>.</p>

Where ?autoplay=1 appended to the src url is what will trigger the autoplay, though this doesn't work for most mobile devices as a concern for best practices concerning data consumption.

You can add this manually or when getting the embed code from Vimeo, just open the show options menu and select autoplay to append it automatically.

As for disabling the video, on my test in Firefox at least, once the video was set to display: none; past the break-point, it stopped playing on its own judging from the audio cutting out.

Well, I guess this question helps address if you want a hard stop when the videos are not visible.