[Support request] strange padding issue causing trouble with video player

[Jeffrey]

I am using Generate Press on my site. I have wordpress categories showing a list of video posts. However, I’m having a strange issue that is causing problems for my video player (which is fed from Brightcove). When I look at the post in a list with other posts, there is a strange bit of extra padding on the far right in the entry-header that seems to be causing the player progress bar to show up over top of the play and sound icons. If I click on the title of the post in the list and I’m taken to the actual post, then the player loads fine.

If you look at the website I provided, you will see it in list form. The first video should autoplay and you can see what I mean. If you mouse over the pause button, the progress bar pops up over it, making it very difficult to use.

However, if you click on the TITLE of that first post and you are taken to the actual post (without it being in a list) the player acts as it should and there aren’t any issues with the pause button or the sound button at the bottom.

How can I revise the CSS to make sure that the posts show up in the list, like they do on the actual post page?

[David]

Hi there,

something is adding this CSS to the player on the archive pages:

.video-js .vjs-big-play-button .vjs-icon-placeholder:before, .video-js .vjs-modal-dialog, .vjs-button>.vjs-icon-placeholder:before, .vjs-modal-dialog .vjs-modal-dialog-content {
    margin-top: -23px !important;
}

Can’t see where its coming from. If you know where then delete it.
If not add this CSS to the Customizer > Additional CSS to override it:

.video-js .vjs-big-play-button .vjs-icon-placeholder:before, .video-js .vjs-modal-dialog, .vjs-button>.vjs-icon-placeholder:before, .vjs-modal-dialog .vjs-modal-dialog-content {
    margin-top: 0 !important;
}

[Author]

Posts