Slider Revolution - YouTube Video Will Not Play

Support
#1

Hi - I cannot get a YouTube video to play when it’s set as the background of a slide in Slider Revolution on a page on my site. Here’s a link: https://dev-catch-happiness.pantheonsite.io/homepage/

Current arguments as follows: hd=1&wmode=opaque&showinfo=0&rel=0;

I’ve tried adding the following arguments based on other support threads:
VQ=HD720
autoplay=1

The video should play at the very top of the site. The cover image is correctly pulled in from YT but I can’t get a video to play at all. The only thing that does play is the logo fading in and out, which is part of the slide in Slider Rev. I also tried uploading to Vimeo to figure out if it’s a video issue - everything worked great on Vimeo. Please let me know what I need to do to get this to work!

#2

Hi - just wanted to check in here as I’m trying to get this functionality ready for my client to review by EOD tomorrow. Please let me know what I can do to get this working when you have a chance. Thank you!

#3

Hi - just following up here again. Please let me know when you can!

#4

Hello @sAustinPower,

We resolve tickets from oldest to newest. In that regards it’s a humble request not to bump tickets as it pushes the ticket back into the queue. Having said that please accept my apologies for the trouble you are facing.

Upon checking the website I can see video playing fine but looking at the source code it seems that you are using Vimeo to stream the video. Can you please confirm the same?

Thanks.

#5

I changed the setup to use Vimeo so I could actually show off the functionality.

Please try this URL, I’ll leave the attempt to embed YouTube on that page permanently: https://dev-catch-happiness.pantheonsite.io/test-youtube/

#6

Hi there,

I suggest that you add the video as a Layer of the slider and not the background of it. To do so please kindly follow the article below:

https://www.themepunch.com/revslider-doc/video-layers/

That should do the trick. Thank you.

#7

Thanks - that gets the video onto the page but does not play video as soon as that element rotates into view. I need this to autoplay essentially as a background image - how can I do that? I’ve already setup the video to autoplay via the settings but that appears to just get completely ignored.

Appreciate the help, please let me know!

#8

Hey there,

I’ve replicated this in my test site in Pantheon so it looks like this issue is on their end. Please contact them to fix this error.

www-widgetapi.js:121 Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://www.youtube.com') does not match the recipient window's origin ('https://dev-catch-happiness.pantheonsite.io').

It works in my other test sites that are not in Pantheon.

Thanks.

#9

Thanks Christian! Just for my own reference, where did you find that error? I can’t find that anywhere in the console, network tab, etc.

#10

Hi there,

It’s available in browser developer console. I can see it as well and looks like their host has some sort of ORIGIN configuration that prevents inclusion of external source, especially for embed codes.

I’m on chrome’s console, that clearly tells that youtube is being blocked, or not totally blocked but granted with limited functionality.

Thanks!

#11

Hi - can you explain this further? I’m still unable to replicate the issue you are mentioning here on any of my environments, I’m really not sure how you’re getting to “chrome’s console, that clearly tells that youtube is being blocked…”. Regardless, I did pass this on to Pantheon support and they are also unable to replicate. I’ve attached a screenshot of my console, there is no such error (nor any errors or even warnings at all being reported).

#12

You won’t see the error when you’re in incognito mode so you need to use the normal window.

Here’s proof that it doesn’t work in Pantheon only but works in my other test site.

Thanks.

#13

Still confused on where you’re seeing this error, here’s my (clean) console log on a fresh load of the homepage in a regular chrome window, both logged in and logged out (only logged out attached). Can you please explain to me how you are getting this error on my URL? Because I cannot replicate it. And further, when the error does not happen, the video still does not play.

In your example, I’m seeing a mis-match of https vs. http and have seen articles pointing to that causing the error in question. However, I’ve reviewed this on my environment and the embed code is correctly pulling in the URL via https, so that isn’t the issue, and the error message you provided earlier shows https for both YouTube and my dev environment.

#14

Hey There,

I am another staff checking in. I have viewed your page and I can see the error:

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://www.youtube.com') does not match the recipient window's origin ('https://dev-catch-happiness.pantheonsite.io').

And yes they are both using https. The problem is that Pantheon site does not allow iframes that has a different url. Could you please request further assistance from Pantheon and asked them if they allow iframes which has different sources?

Please let us know how it goes.

#15

Thank you @RueNel - I still don’t understand how you are generating this error message though. I cannot replicate this anywhere and have provided screenshots of the site loading without this error (another screenshot attached). Further, when this error is not present, the YouTube video still does not play, so this doesn’t even explain the problem.

In addition, I’ve embedded another YouTube video on the page (with ?autoplay=1) and the video loads without issue and begins playing immediately, so the problem is most definitely not with Pantheon being unable to load an iframe with a different URL.

https://dev-catch-happiness.pantheonsite.io/test-youtube/

#16

Hi there,

I can see the error too, the error is because your site is unable to contact youtube through API, it’s different from adding ?autoplay=1 with normal embeds. https://developers.google.com/youtube/iframe_api_reference

The communication between your site and youtube site is not allowed for some reason. I checked the source code and noticed that in your slider, the ORIGIN URL is https://appserver-baddabcb.c.pantheon-dmz instead of https://dev-catch-happiness.pantheonsite.io, that could be the reason.

https://www.youtube.com/embed/_LEGmdl8GUA?version=3&enablejsapi=1&html5=1&hd=1&wmode=opaque&showinfo=0&rel=0&VQ=HD720;;origin=https://appserver-baddabcb.c.pantheon-dmz.internal;&controls=0

Would you mind providing your login credentials in a secure note? Maybe I’m able to see more what’s within your slider.

Thanks.

#17

Thank you - please find credentials in a secure note here. The slider is called ‘test’

#18

Hi,

I also tried the same video and the same youtube arguments in my test site and it did work.

Something in your site is preventing it from working.

Can you try testing for a plugin conflict. You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

Let us know how it goes!

#19

That still doesn’t change anything: https://youtube-catch-happiness.pantheonsite.io/test-youtube/

#20

I found the problem and fixed it - the code that generates the url is using $_SERVER['SERVER_NAME'] rather than $_SERVER['HTTP_HOST'] to generate the URL. This is not a safe way to generate the URL as some environments do not have a SERVER_NAME that you can permanently hook into. For example, Pantheon is setup using containers and the container the site is on can and does change.

I implemented a fix for this by setting the following in wp-config:
$_SERVER['SERVER_NAME'] = $_SERVER['HTTP_HOST'];

This is just a workaround though - I would really like to have the source updated to use HTTP_HOST instead of SERVER_NAME if at all possible. I’m assuming this is outside of your control since it’s Slider Revolution and not X, but I’m not sure exactly what level of control you have over this within the theme.