Next problem with youtub-videos in essential grid: Everything is shown fine. In the middle of every thumbnail, there is a play icon - perfect. But clicking on the button or on the space left and right of the button does not start the video. If I click on the area top or down the button, the video starts as expected. How can I make the complete thumbnail and mainly the play button work as a play button?
Uli
Hey Uli,
I could not replicate your setup and I also don’t see such issue in Essential Grid’s demos so would you mind giving us the page where you’ve setup the grid and also WP admin access in a Secure Note so we could see your exact setup and try to replicate it on our end to see if it’s possible to fix with settings available in the Skin Editor and/or simple CSS.
Thanks.
I’ll send you the requested Infos via secure note.
Hi There,
To fix this issue, please add this custom CSS under Theme Options > CSS:
.esg-entry-cover .esg-overlay {z-index: 99999;}
The CSS above will move the trigger video element to the TOP so the video will play when you click on it.
Regards!
Hi Thai,
thank you, that solved the problem. But now (or also before) a second problem occurs:
While mouseover a video, a box with the videos headline appears under the video. When I first integrated the grid, this had a white background and was shown in top of all other elements so the headline was readable. Now the background is transparent and the text is almost unreadable. I did not change the skin, the background-colour there is still #ffffff.
Any Idea?
Best regards
Uli
Hey Uli,
The link to the page with the grid returns a 404 page not found. @thai is currently not available so I could not ask what grid you were using. Please set it up again so we could check the root cause of the issue.
Thanks.
Hi Christian, sorry, I had to change the URL and forgot to tell you. See secure note …
Hey Uli,
I removed @thai’s code because it partially hides the play button.
This is the correct display without the code.
The correct solution to that is setting the play button layer to Display Block to cover the left and right side and then increase the top and bottom padding of the layer enough to cover the top and bottom areas of the thumbnail. Clicking anywhere in the thumbnail now would play the video because the play button has complete thumbnail coverage. I’ve also disabled the link of your cover because it’s not needed.
Now for the Headline issue, it’s caused by the z-index stacking of rows. The theme provides a z-index option for Sections and Rows to achieve a stacking effect. This causes a stacking issues with popups out of the box though so you need to configure the z-index of a section and rows individually. Basically, you would need to set the first row’s z-index higher than the row below it (see secure note)
Hope that helps.
Wow - great help. Everything works fine now!
Thank you very much, good job!
Uli
You’re welcome, Uli. 
Hi again,
unfortunately, your solution now causes another problem: If I want to pause, fast forward or play back the video, this doesn’t work, because the youtube-buttons for this are shown, but not accessible. Either in grid view as also in full screen.
That’s not the behaviour, a user would expect …
How can I change this?
Best regards.
Uli
Hi Uli,
I’ve checked your web page and I can see the control buttons on YouTube videos are working just fine, please check the video screencast in the secure note.
Is this issue limited to certain browser? I was using Chrome browser latest version, which browser you were using and on which platform?
Thanks.
Hey Uli,
I’ve reverted to @thai’s solution to compare what’s happening before and after I gave you the correct solution and the issue you’re experiencing now still persists so I restored it to the correct solution after.
The issue isn’t related to the solutions given in this thread but a normal behavior of Essential Grid when you click and drag in the video timeline. Simply clicking on the timeline which is the mostly used action will not cause the issue like what @Alaa showed you. I also made my own test (see secure note).
Regretfully, we can do nothing for this but post in our issue tracker so ThemePunch would be made aware of this behavior.
Thanks
The problem still occurs testing it in firefox (61.0.1 (64-bit)). I’ll send you screencast via secure note.
In chrome, simple clicks work, but a click and move (to draw back the video) doesn’t work. See screencast.
Hey Uli,
I believe you missed my reply after @Alaa. I have replicated the issue. As I’ve said above, it happens when you click and drag. The usual way of moving in the timeline is just by clicking as you can see @Alaa have not replicated it. But, I have since I do click and drag sometimes.
As I’ve said above also, regretfully, we could not do anything (could not be fixed by simple CSS and/or JS) for this because it is the Essential Grid’s developers, ThemePunch, that needs to change this behavior. This is why I posted this in our issue tracker.
Thank you for understanding.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.