Poster or Layer Covering Video Player for YouTube URL

[ideatavern]

Hey friends, I have a video player Cornerstone element on a staging page here. This works fine for Vimeo URLs, however, for some reason, with YouTube URLs, I’m unable to click in the middle of the video where the large YouTube play button is shown (or anywhere within the YouTube still for that matter). It only works to play the video if I use the time rail controls / bar at the bottom. Or it will work if I set a poster image, though I’m planning on these videos being dynamic, so a poster image won’t always work. It looks like it might be covered up by an invisible layer / frame / container? Any ideas? Thanks so much.

[prakash_s]

Hello @legendshill,

Thanks for writing to us.

I checked your given page URL and I can not find any video there on the page. Please set the video on your page se that we can check it at our end. Please make sure you have added the correct embed code. In case you have not seen the video doc please have a look at it.

Video | Themeco Docs

In case it doesn’t work for you, I would suggest you troubleshoot with a few of the common issues before we investigate your settings.

If it doesn’t work for you, please share your details in a secure note. Please provide the following details

• WordPress Login URL
• Admin level username and password
• Exact page URL

You can find the Secure Note button at the bottom of your posts

Thanks

[ideatavern]

Hey Prakash, thanks for the quick response. You should see two video players lower on the page under the “Photos” section of that page. I’ve attached a screenshot of the first one for reference.

I’m submitting login details via secure note now.

[christian]

Hey @legendshill,

Not sure how you are displaying the video as you’re not using Cornerstone but you should be using the Video Embed for Youtube videos and not the Video Player .

The Video Player is only for self-hosted videos. It might work with non-self-hosted Vimeo but it’s not the best practice. Just to be sure, self-hosted videos are direct-to-video-file URL like http://example.com/video.mp4.

Please change your setup to use the Video Embed.

Thanks.

[ideatavern]

Thanks for this update @christian. I’m using Cornerstone within a Global Block to create this. So a page template pulls from that Global Block “Listing Template” which uses conditions to see if a custom post type has a URL for a video or two. If it does, it’s currently set to use that URL as the source using the Cornerstone video player. That works perfect if a user inputs a Vimeo link, and it also works for YouTube with the exception of the overlay (which seems to work if I use a test poster image).

Per your recommendation, I tried changing this to the video embed, but with the standard Vimeo / YouTube URLs, it doesn’t seem to be connecting at all (as compared to using Vimeo or YouTube’s natural embed codes that have slightly different URLs). So that would eliminate users being able to drop in a friendly URL to their video. Hope that makes sense as to why this is a little tricky. I was hoping that there was a layer I might be able to hide with a CSS hack or to fix this with a function since it’s very close with the player. Do you think there’s a solution like that?

Thanks again for your time and help.

[ruenel]

Hello @legendshill,

We have checked your global block and we found this:

Use your browser’s Development Tool, you can check the live HTML code and find out which element is covering the video. This will also allow you to figure our which CSS selector you need to use or what CSS code has been used to style the page.

Check out this video demonstration:

Dev Tools demo

Please note that custom coding is beyond the scope of our support. You will have to maintain any custom coding to make sure that it will still work after any updates or does not create any issues or incompatibility in the future.

Hope this helps.

[ideatavern]

I was unable to find the specific element / layer that was keeping the YouTube video itself from being clickable, but I ended up hacking this together by giving the YouTube iframe a z-index of 1 and then giving the X-Theme player controls a z-index of 999 if that helps anyone else experiencing this issue.

.mejs-mediaelement iframe {
    z-index: 1 !important;
}

.mejs-controls {
    z-index: 999 !important;
}

[prakash_s]

Hello @legendshill,

Glad that you were able to get the solution and thanks for sharing it.

Thanks