Vimeo video will not play on mobile

  • Resolved alexiumz

    (@alexiumz)


    7 years, 4 months ago

    Hi, I’m trying to embed a video on my website within a lightbox. That I’ve done, however I have trouble playing the video on mobile devices.

    On desktop and on tablet, the thumbnail appears fine and plays when clicked. On mobile, the thumbnail also appears however will try to load indefinitely and will never play.

    I have tried using both player.vimeo.com/video/123443472 and vimeo.com/123443472 as links for the lightbox, however only the first one works – the second only displays a white (empty) lightbox on all devices.

    The first style link can be tested when pressing the ‘Play Reel’ button on the homepage here: https://www.wildfilms.co.uk
    The second link can be tested here: https://www.wildfilms.co.uk/home-2

    I realise autoplay wont work on mobile and that’s not the issue; it’s simply that the video will not play at all – but only on mobile devices. I’ve asked Vimeo themselves and they’ve directed me here as they say it’s the plugin and not them.

    Thanks in advance for your assistance.

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)

  • Hi, on my mobile phone (Nexus 5, Android 6.0) the film on your homepage plays just fine.

    About the home-2 page button: this is the usual way of creating a Vimeo link and Easy FancyBox should be able to convert that URL to the proper player address. But a script snippet in your theme is preventing this and overwriting other Easy FancyBox settings:

    
/* no need to edit below unless you want to change the default FancyBox settings */
api.on('revolution.slide.onloaded', function() {
 
    jQuery(this).find('.fancybox').each(function() {
 
        var $this = jQuery(this);
        if(!$this.is('a')) $this = $this.removeClass('fancybox').find('a');
 
        $this.addClass('fancybox').fancybox({
 
            /* begin FancyBox options */
            width: 960,            
            height: 540,
            autoSize: true,
            aspectRatio: true,
            fitToView: true,
            autoCenter: true,
            scrolling: 'no',
            type: 'iframe',
            onClosed: function() {api.revresume()}
 
        }).on('click', function() {api.revpause()});
 
    });
 
});	}
	
});	/*ready*/

    Is it the Reveolution slider you are using? I think it’s added by that plugin.

    You either need to figure out a way to remove that snippet or NOT give the button the class “fancybox”. In either way, Easy FancyBox should start working.

    If you ever wish to adapt Rev slider to work with Easy FancyBox and images (not needed in the above case) you can find instructions on https://premium.status301.net/support/topic/slider-revolution-revslider-integration/

    Thread Starter alexiumz

    (@alexiumz)

    Thanks for your rapid and comprehensive response. Interesting that the video works for you – it didn’t work on either my Galaxy S7 (Android 7.0) nor in Responsive design as an iPhone 6 (and above) in Safari.

    It is Slider Revolution I am using. That snippet of code is the developer’s recommended method of using Easy Fancybox with their slider, as seen here – I just followed those instructions!

    You can see in the guide to add the class ‘fancybox’ and to use the ‘player.vimeo.com’ style URL. I’ve taken out the manually specified class and it works with both styles of URLs.

    It auto-fullscreens on mobile though to be honest, I don’t think that’s such a terrible thing.

    Hopefully if others experience the same or similar issues they’ll be able to find this thread and follow your helpful advice. Thanks very much for your help.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Vimeo video will not play on mobile’ is closed to new replies.