Overlay color youtube video

an overlay will be possible – but how do you start the video.
If you let it start automatically – yes is possible – but your sitevisitors would have no chance to stop it then. …

filtering is possible and there are no z-index conflicts then. f.e. try:

.avia-video iframe, .js_active .avia-iframe-wrap iframe, div .avia-video .avia-iframe-wrap {
-webkit-filter: sepia(100%) saturate(200%) brightness(90%) hue-rotate(160deg);
filter: sepia(100%) saturate(200%) brightness(90%) hue-rotate(160deg);
}

see results here https://webers-testseite.de/youtube-masonry/
this combination is a trick :
1) the container is forced to be seen in sepia ( old foto-style) – but sepia 100% is not saturated enought to get strong colors so:
2) saturate is followed to get bright colored “overlays”
3) with brightness ( thats clear) and afterwards
4) the hue-rotate angle puts the now one-colored thing to a color.

play a bit with saturate and hue-rotate to get the color you like

1) : i’m participant as you so i do not see private messages. The link is new for me.
2) : my code shows you a way to do it for video ALB setted videos.
3) : this will be the only possibility to get this – because if you do not want to start with autoplay ( and thats my comment above) there will be no overlay option – an overlay will hamper the play-button to work.
4) : you see in my code above that there is after sepia filter a saturate filter – because sepia colorizing is not in intense color. So try to insert after your sepia filter a saturate one.
5) : maybe try this in your code (don’t forget webkit-filter option) sepia(1) saturate(500%) brightness(0.9) hue-rotate(170deg)

here is another method – i did not know that pointer-event has an influence of the links down under.
( i gave a custom class to one of the surrounding containers: with-overlay)

.with-overlay .avia-iframe-wrap::after { 
  content:"";
  width:100%;
  height:100%;
  position:absolute;
  background-color: rgba(0, 0, 255, 0.5);
  pointer-events: none;
}

see my test page above – this effect is not nice – It’s like a veil over

ok – we never stop learning:

but : Safari does not do that on my end here

Info from can i use this (Partial in Safari refers to not supporting the hue, saturation, color, and luminosity blend modes )

and the color blend mode is the interesting one for you .

there is a workaround since there was a mix-blend-mode
give the surrounding container a custom class and:

.with-overlay .avia-iframe-wrap::after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: #004ae1;
    pointer-events: none;
    mix-blend-mode: color;
}

you can see here a list of that: https://css-tricks.com/almanac/properties/m/mix-blend-mode/

the options are very similar to photoshop layer styles