-
AuthorPosts
-
August 1, 2022 at 11:22 am #1360082
Hi,
I have a vimeo video that embeds in a colour block.
It doesn’t seem to be playing on mobile. Is there a specific code to add at the end of the vimeo url or CSS?
Also, is there any way for the video to resize and display in it’s orginal aspect ratio on video, so that it does not crop. Currently set as 75% of browser window height in colour section background.
Thanks
MarcusAugust 2, 2022 at 6:03 pm #1360340Please advise on my precious query
Thanks
MarcusAugust 3, 2022 at 9:10 am #1360438Hi,
Thank you for the inquiry.
Please note that background videos are disabled on mobile devices by default, which is why a fallback image option is available. The fallback image will be applied as background and will display instead of the background video on mobile devices or on smaller screens.
If you really need a video to display on mobile devices, try to create a slider in the layer slider panel. Add a Video/Audio layer, select a media or video, then enable the Background Video option in the Content > Media Options panel.
Best regards,
IsmaelAugust 8, 2022 at 7:19 pm #1361148Hello Ismael,
Is it possible to disable the default “don’t play media on mobile” for a video background on a Color Section element?
https://flowismedicine.com/We’d like the video on the background to play for all devices/platforms. Using a Layer Slider seems convoluted for this simple element… and will also mess with the current text animations in place via a plugin.
Sincerely,
GregAugust 9, 2022 at 10:12 pm #1361287Hello Ismael/Support,
Just checking back in… also, regarding background video:
I am seeing elements from the YouTube player come in such as the title in the upper left corner, “Watch Later” and “Share” links in the upper right corner.Is there a way to keep these elements from showing?
Right now, people on phone are seeing a “Play” button in the center of the screen – and video isn’t playing as mentioned.(Do you prefer this get opened as a new support item?)
Sincerely,
GregAugust 10, 2022 at 1:05 pm #1361347Hi,
Sorry for the delay. You can edit the enfold/config-templatebuilder/avia-shortcodes/slideshow/slideshow-video.js file, look for the _playerReady function around line 279 and replace it with the following code.
//wait for player to be ready, then bind events _playerReady: function() { var _self = this; this.$option_container.on('av-video-loaded', function(){ _self._bindEvents(); }); switch(this.type) { case "html5": this.$video.on( 'av-mediajs-loaded', function(){ _self.$option_container.trigger('av-video-loaded'); _self._html5_mute(); _self._html5_play(); } ); this.$video.on( 'av-mediajs-ended' , function(){ _self.$option_container.trigger('av-video-ended'); } ); break; case "vimeo": //finish event must be applied after ready event for firefox _self.player.addEvent('ready', function() { _self._vimeo_mute(); _self._vimeo_play(); _self.$option_container.addClass('av-video-playing').removeClass('av-video-paused'); _self.$option_container.trigger('av-video-loaded'); _self.player.addEvent('finish', function(){ _self.$option_container.trigger('av-video-ended'); }); }); break; case "youtube": var params = _self.$video.data(); if( _self._supports_video() ) { params.html5 = 1; } _self.player = new YT.Player(_self.$video.attr('id'), { videoId: params.videoid, height: _self.$video.attr('height'), width: _self.$video.attr('width'), playerVars: params, events: { 'onReady': function(){ _self.$option_container.trigger('av-video-loaded'); _self._youtube_mute(); _self._youtube_play(); }, 'onError': function(player){ $.avia_utilities.log('YOUTUBE ERROR:', 'error', player); }, 'onStateChange': function(event){ if (event.data === YT.PlayerState.ENDED) { var command = _self.options.loop != false ? 'loop' : 'av-video-ended'; _self.$option_container.trigger(command); } } } }); break; } //fallback always trigger after 2 seconds setTimeout(function() { if(_self.eventsBound == true || typeof _self.eventsBound == 'undefined' || _self.type == 'youtube' ) { return; } $.avia_utilities.log('Fallback Video Trigger "' + _self.type + '":', 'log', _self ); _self.$option_container.trigger('av-video-loaded'); }, 2000 ); },
This will mute the video and play it automatically. You may also have to modify the enfold/config-templatebuilder/avia-shortcodes/slideshow/slideshow.js, look for the _prepareSlides function and at the very first line, just add this code to disable the function and prevent the theme from rendering the fallback images.
return;
Best regards,
Ismael -
AuthorPosts
- You must be logged in to reply to this topic.