Layerslider video background not working on Chrome

Hi Ismael,

I am having the same issues with MAC Chrome.

As Layerslider WP is bundled with Enfolds – this is my only option for support

Google seems to think this issue is resolved with previous chrome update.
https://bugs.chromium.org/p/chromium/issues/detail?id=807304

I am running
WordPress 5.0.3
Enfold – You are running the latest version! (4.5.2)
Chrome – Version 71.0.3578.98 (Official Build) (64-bit)
LayerSlider WP – 6.7.6

On the home page I have a Layerslider with a background video. ( The Video shows in the Layerslider Editor and auto plays) However, on the live site the video does not load. I just get a spinning Ajax wheel of death.

Console log show error:

www-widgetapi.js:100 Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://www.youtube.com') does not match the recipient window's origin ('http://www.domain.com').
h.B @ www-widgetapi.js:100

On the same page I have Video the opens in a modal video and auto plays.
And
a Colour Section Video Background that also loads and auto plays.

It seems related just to the Video Background on the LayerSlider WP – as all other video elements play just fine.

There is no audio in the Video and Yes volume is set to Zero and &mute=1; parameter is added to the <iframe src=

Trouble shooting…
I have disabled all plugins
Used Parent Theme Enfolds instead of my customised Child Theme.

Error still persists.

I have tried all methods of adding the youtube hosted video – youtube watch url URL / youtu.be URL / Youtube Share <embed> code
On pasting the youtube embed code into the layer slider I have tried multiple combinations of youtube embed parameters.
I even copied the html source <iframe code from the page source containing an Advance layout Builder Colour Section background video – with all the parameters – then changing the video Play ID accordingly.

During trouble shooting I noticed the following:
Safari (Version 10.1.2) and Firefox Developer (65.0b11 (64-bit)
The Layerslider Background video loaded fine the first time – but after refreshing the page the video did not play.
On the same page the Advanced Layout Builder Colour Section Background Video – Did not play.

After changing the LayerSlider WP background video to self hosted – everything is working as expected.

<video width="640" height="360" preload="metadata" autoplay>
	<source src="/wp-content/uploads/2019/01/video-file.mp4" type="video/mp4">
</video>

Code Examples:
Layerslide code from URL

<iframe width="560" height="315" src="https://www.youtube.com/embed/youtubevideoid" frameborder="0" allowfullscreen></iframe>

LayerSlider WP background video – DOES NOT WORK IN ANY MAC BROWSER

Youtube Video Embed Code

<iframe width="560" height="315" src="https://www.youtube.com/embed/youtubevideoid?controls=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

LayerSlider WP background video – WORKS IN SAFARI ONLY

Youtube Video Embed Code – added &autoplay=1&mute=1

<iframe width="560" height="315" src="https://www.youtube.com/embed/youtubevideoid?controls=0&autoplay=1&mute=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

LayerSlider WP background video – DOES NOT WORK IN ANY MAC BROWSER

Extended Parameters

<iframe height="1600" width="900" data-autoplay="1" data-volume="0" data-mute="1" data-videoid="youtubevideoid" data-hd="1" data-rel="0" data-wmode="opaque" data-loop="0" data-version="3" data-autohide="1" data-color="white" data-controls="0" data-showinfo="0" data-iv_load_policy="3" data-original_url="https://www.youtube.com/watch?v=youtubevideoid" frameborder="0" allowfullscreen="1" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" title="YouTube video player" src="https://www.youtube.com/embed/youtubevideoid?original_url=https://www.youtube.com/watch%3Fv=youtubevideoid&iv_load_policy=3&showinfo=0&controls=0&color=white&autohide=1&version=3&loop=0&wmode=opaque&rel=0&hd=1&videoid=d5QNoIwmKHk&autoplay=1&html5=1&mute=1&enablejsapi=1&origin=http://www.domainexample.com&widgetid=1&volume=0"></iframe>

LayerSlider WP background video – WORKS ON FIRST LOAD – SAFARI and FIREFOX
On same page Colour Section Video Background did not load/auto play
ON REFRESH/RELOAD of the PAGE – LayerSlider WP background video PLAYBACK FAILED
On same page Colour Section Video Background now auto playing

CHROME sometime plays and some time does not play the Layerslider video background.
I cannot work out a stable reason why this happens.

There is some information here about loading of the DOM elements out of order which may be the ultimate cause of a delay problem
https://github.com/gsu-library/sirenia/issues/116
also an old thread on the same issue
https://groups.google.com/forum/#!topic/youtube-api-gdata/XqaUDWkQXcw

Related ENFOLD support threads

I hope I’m not alone and support can work with LAYERSLDER WP to resolve this issue

FYI – yes I also tried varying Chrome browser settings :: chrome://flags/#autoplay-policy

Hi Ismael,

Still have not resolved this issue.
WP 5.0.3 or WP 5.1

Just installed a new .local version to do presentation with client on my laptop. And now both Youtube and Self Hosted Videos don’t play in WP LayerSlider.

Also noted – When Editing LayerSlider on the new local layer slider background <divs> are empty.
<div class="ls-background-videos"></div>
<div class="ls-slide-backgrounds"></div>
LayerSlider is saving changes – however the output does not update – cleared cache and incognito.

I have delete all other SLIDES and now only have the one slide with self hosted background video – NO YOUTUBE!
Console Log is still showing error
The target origin provided (‘https //www.youtube.com’) does not match the recipient window’s origin

Hoping you can release a version of Enfolds with the latest WP LayerSlider

Hi Ismael,

Ok this has taken 4 hours to narrow down.

I have upgrade the SERVER DEV site
WP 5.1
PHP 7.2
ENFOLD 4.5.4

enfold-child is deactivated with enfold parent theme active
No plugins
No custom Quick css

Open a fresh incognito window
On first load the WP LayerSlider [HOME YOUTUBE] video background is visible
Scroll to the bottom of the home page the HOW TO GUIDES – VIEW DIY VIDEOS colour section (Youtube) background does not play
Stay at the bottom of the home page and do a hard refresh of the browser a couple of times.
Now the HOW TO GUIDES colour section background video plays
Now Scroll to the top of the page
The WP LayerSlider [HOME YOUTUBE] video Background – nothing visible accept spinning loading icon.

I can consistently reproduce this in Chrome and Firefox on a Mac Min and Mac Book Pro

If I change the WP Layerslider at the top of the home page to [HOME LOCAL VIDEO]

Both WP LayerSlider [HOME LOCAL VIDEO] video background && HOW TO GUIDES colour section background videos BOTH PLAY!

There must be some kind of conflict or precedence to which background video is streamed from Youtube.

To double check this, I have created a fresh install test environment. (Response Private)

/test-youtube/
WP LayerSlider Youtube Background Video –> Video Does Not Play
+
ENFOLD ALB Colour section Youtube Background Video –> Video Plays

/test-youtube-2/
ENFOLD ALB Colour section Youtube Background Video –> Video Plays
+
ENFOLD ALB Colour section Youtube Background Video –> Video Plays

So specifically this narrows the issue to conflict of having both of the following on one page
WP LayerSlider Youtube Background Video && ENFOLD ALB Colour section Youtube Background Video

Let me know if you can reproduce this bug locally

Hi Ismael,
The Site ready has SSL Certificate with HTTPS://

I have force HTTPS in WordPress config file – this previously did not make a difference.
i’ll try the suggested plugin to see if that removes the js warning.

The issue for me ATM is not the JS warning – but that I can’t stream two Youtube Videos on the one page. i.e WP Layerslider video Background and ALB Colour section background video.

Since you can reproduce this locally can you upgrade the WP Layerslider to 6.8.1 version on the local version to see if this fixes the issue.
The Change Log seems to suggest this may have been fixed.