Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #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
    Marcus

    #1360340

    Please advise on my precious query

    Thanks
    Marcus

    #1360438

    Hi,

    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,
    Ismael

    #1361148

    Hello 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,
    Greg

    #1361287

    Hello 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,
    Greg

    #1361347

    Hi,

    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

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.