VideoPress: removing dark overlay?
-
Is there any way to remove the depressing & ugly dark overlay on VideoPress videos? The overlay is shown before the video starts.
See examples here: https://en.support.wordpress.com/videopress/
Could anyone tell me the rationale for this overlay? No other video player I know of does this, and no user I know likes it.
VideoPress would be a really nice and functional player without this overlay. Why not just use a hover-sensitive play-button as every other modern player does (e.g. youtube, html5)?
Or simply add a shortcode attribute like “overlay=none” or “style=light”?
-
Please provide the URL of the site you are referring to and the URL of the posts or page on that site in question.
-
timethief, it’s not about a specific site, but VideoPress as such. I provided a link to a site with embedded VideoPress above. The dark overlay is clearly visible.
-
Hello @baskervillefan,
This may be removed by adding custom CSS if you have an upgraded WordPress.com plan. It’s probably the reason why timethief wanted to ask for the URL.
Regards,
Rose -
hi rosepajaroja, I mostly run premium (but not business) plans, thus I can add CSS but not Javascript. How can I remove the layer with custom CSS? I found no documentation whatsoever on this. Your response is much appreciated.
-
Hello @baskervillefan,
You can find instructions on how to Add Custom CSS from this link:
https://en.support.wordpress.com/custom-design/editing-css/You can also search from the CSS threads:
https://en.forums.wordpress.com/forum/css-customizationThere is no direct instructions available on how to customize the CSS of each themes, as it varies. It’s why we needed to check your website, so we can try helping you with the code to put in.
Regards,
Rose -
Thanks, but as noted, I found nothing on how to remove the dark layer of VideoPress (or configure it in any other way) by using CSS.
I don’t think this is theme-related, as it concerns the VideoPress embed on all sites and themes. Otherwise, the theme I’m using most is Baskerville.
Besides knowing how to remove the layer, I’d also like to know what the rationale for this layer is, and if there is even one single user who considers that layer to be something nice or beneficial?
-
Hello @baskervillefan,
I did a test post on my website, to see what you’re saying. Are you referring to the “play” icon overlay? See screenshot here: https://i.imgur.com/WxqGJYD.png
My website uses Argent theme. I tested this CSS code to remove that icon:
div.__vd_pn2fl9_play-shim-icon { display: none; {And it now looks like this: https://i.imgur.com/XoGA56T.png
The play icon on overlay disappeared, but I still have the small icon at the bottom for play.
You may want to try that code if it would work for you:
1. Go to your website’s customizer: https://wordpress.com/customize/
2. Go to CSS on the side menu.
3. Then put in the code.
4. Click Save and Publish button.You can find more information from this link:
https://en.support.wordpress.com/custom-design/editing-css/If you would need more customization, it would be best if you can hire or get a professional to do this for you.
Regards,
Rose -
To remove the dark transparent overlay, you can try adding this code:
.__vd_swgik9_play-shim-bg { display: none; }I tested it on the video sample from the support doc, and it now looks like this: https://i.imgur.com/tHbs4DD.png
Thanks, but as noted, I found nothing on how to remove the dark layer of VideoPress (or configure it in any other way) by using CSS.
You will not find any direct instructions on how to do this, as the CSS customization varies. However, every website can be customized through CSS – this is the stylesheet of your website.
Let me know if you need further assistance. I really hope this gets sorted out.
Regards,
Rose -
yes it’s about the dark transparent overlay, not the play icon/button.
On your screenshot it looks like you indeed removed the overlay. However, in my case adding the CSS code to the Customizer didn’t have an effect.
How/where did you retrieve that CSS code (.__vd_swgik9_play-shim-bg)? Is this theme or even video specific?
(Regarding the play icon, ideally it should turn bright white once the mouse hovers over the video. At any rate this is how the standard html5 player behaves, and most other players, too. Is there a CSS fix to this one as well?).
-
Hello @baskervillefan,
I use the Developer tools of Google Chrome to get the class selector (.__vd_swgik9_play-shim-bg).
If you’re using Chrome, you can click the 3 dots on the upper right hand side -> More Tools -> Developer Tools
We can try to add the hover, too.
If you can give the link to the website you’re working on, I could better help you. The reason why I’ve been asking is because I need to visit the website, use the Developer tools of Chrome to get and test the CSS code. Same way I did with the sample video on the support doc.
Regards,
Rose -
Hi rosepajaroja,
I could remove the overlay using Firefox DevTools.
However, it looks like the second part of the videopress class selector, in your case ‘swgik9’, is being randomly assigned every time the page is reloaded. Thus, adding this code to the CSS customizer won’t work.
Instead, I tried to add the following attribute selector to the Customizer to catch them all:
div[class*=”play-shim-bg”] {
display: none;
}However, this had no effect. Is something wrong with the code, or is it rejected by WordPress due to the * wildcard?
Any other ideas to tackle this?
-
I think one problem the CSS wildcard selector doesn’t catch anything in the video is because the video player is inside of an iframe. The CSS selector doesn’t search there, it seems.
This Stack Overflow post talks about this situation, which can be fixed with a simple Javascript command that searches all resources on a page. I’m taking what you said, @baskervillefan, to understand that’s not an option in your plan.
I’m not certain what to advise at this point. What are other’s thoughts?
-
thanks @jessestu. the iframe might indeed be the crux that blocks CSS access. how sad! :-(
If there are any other ideas how to handle this (without having to upgrade to a business plan), please let me know.
@Wordpress: What is the rationale for this dark video overlay? I doubt there is even a single WordPress user anywhere that appreciates such an overlay. Why not simply remove the layer in the standard design and let those who want it add it by CSS or Javascript? To get a responsive feel, it’s far better to include a hover-sensitive play icon, as indeed every other modern player on the web does.
-
Hi @baskervillefan, if I had to guess, it’s so that the play button stands out even if the video has a light background.
-
Perhaps, yes. But it’s quite a strong measure to turn the whole video dark because of this. One might as well simply use an inverted play button. Just as an input to the esteemed WordPress developers. (Consider that not everybody uses a super-bright desktop display.)
(first one is youtube, next two are html5 players, last one is videopress)
-
another example, with a double responsive play icon:
http://www.jerusalemonline.com/culture-and-lifestyle/bollywood-discovers-tel-aviv-31630
Consider how unfortunate it would be to turn this colorful video thumbnail pitch dark. A total turn-off. Even Matt wouldn’t like this. :-)
-
“One might as well simply use an inverted play button.”
Which would look too dark on light videos. And a grey button would fade out on some less colorful videos.
I’m happy to pass your feedback along, but I do hope that helps explain why we do it that way.
-
ok, thanks supernovia.
I collected some more examples here: https://imgur.com/a/JViEW
As can be seen, with an inverted (dual shade), responsive play icon you really should be on the safe side from black to white and everything inbetween, while fully preserving the video thumbnail picture that creators often invest a lot of time and creativity into. It’s sort of their ‘front page’ after all!
Imagine the covers of Time or Vogue magazines always behind a dark gray overlay.
Consider also that many video thumbnails actually include a textual description/introduction to the video that is hardly readable anymore behind the dark layer.
Last not least, removing the dark overlay would also contribute to a lighter, friendlier page layout overall. The current design has a somewhat ‘gothic’ feel to it.
So I see lots of serious drawbacks, but hardly any real benefit here. :-)
- The topic ‘VideoPress: removing dark overlay?’ is closed to new replies.
WordPress.com Forums 
