this was a “fake-solution” https://webers-testseite.de/grid-row-video/

that is a color-section with special youtube input.
and a grid-row following but set to absolut positioning with background transparent. So it comes over the color-section.
If you like that – i don’t know what you like to layout exactly.

maybe you do a grayscale filter before sepia one :

filter: grayscale(100%) sepia(100%) saturate(500%) brightness(90%) hue-rotate(165deg);

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)

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

so you see that on my folder structure of that plugin will be in that way the css is generated on that helper-page from groogle.
the css code comes to the css folder as f.e. chelsea.css the fonts itself comes to the fonts-folder.
so than the relative path is as yours: ../fonts/

so if you don’t like to use that little plugin i would preserve the structure of the page above
1) make (as you did it) a fonts folder on child-themes folder
2) and make a folder css.
3) name that whole @import-rule like your fonts name f.e. chelsea.css
4) include the css via your functions.php of your child theme by:

function local_google_fonts() {
  wp_enqueue_style( 'chelsea-fonts', get_stylesheet_directory_uri().'/css/chelsea.css' );
}
add_action( 'wp_enqueue_scripts', 'local_google_fonts' );
?>

5) Every added Font like this you can do it by semicolon separated line wp_enqueue_style
6) Now everything should work
7) you can add those fonts via that shortcode as body and content font – but they were loaded from local place now because of:

add_action( 'init', 'enfold_customization_switch_fonts' );
function enfold_customization_switch_fonts() {
    global $avia;
    $avia->style->print_extra_output = false;
}

on default webm should work – but have you tried mp4 instead?

Edit : i see you changed it now to youtube pendents.

the class is directly behind the container so it would be with no space between them
.av-layout-grid-container.avia-shadow

but if you like to have different shadows – it might be better to call it a different way: f.e grid-shadow

.av-layout-grid-container.grid-shadow {
    box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.8) !important;
}

And: it will not work if your grid-cells have a background-color!!!

The font is still called entypo-fontello

give to the grid-row ALB element the custom class: avia-shadow

by the way it is defined already on Enfold shortcodes.css as:

.avia-shadow {
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

if you like to have that a bit more visible play a bit with the 0.1 or the px values
if you want to have that allways you can add it via functions.php that class.

This is a little bit hazy – because there was a 1px area of logo and shopping cart that does not work as link area:

but i think you can live with that.:

#header_meta .container {
    top: 50px;
    padding-right: 110px;
    overflow: visible;
    height: 1px !important;
    min-height: 0px !important
}

@media only screen and (max-width: 990px) {
#header_meta .container {
    padding-right: 170px;
}
  
#menu-item-shop .cart_dropdown_link {
    padding: 0 110px 0 70px;
}
}

a 0px height would cause an other layout

And we had to think about what should happen to very small screens !

• This reply was modified 6 years, 10 months ago by Guenni007.

With both 100% width this will be a problem because even if the z-indices are the same ( header-meta got one of 10) this does not work.
So we had to find a version in which those containers do not disturb each other

The thing is that your top menu has a z-index of 10 and is 100% wide. So the cart symbol is without link option too ( and your logo)

• This reply was modified 6 years, 10 months ago by Guenni007.

give to the fixed positioned container an overflow : hidden

Also:
1) die datei : avia-snippet-sticky-header.js aus deinem gedownloadeten Enfold Ordner nehmen, und deinen Wünschen nach bearbeiten.
2) Die Datei in deinen Ordner enfold-child/js/ legen (keine Ahnung wo der bei Mamp sich befindet.
3) Im Enfold-Child Optionen Dialog sollte schon auch shrinking header gewählt sein, und die Starthöhe von 280px eingestellt sein (weshalb mich schon hier wundert warum du nicht bei 140px Endwert landest.
4) in deiner Child-Theme functions.php das hier hineinkopieren:

add_action( 'wp_enqueue_scripts', 'wp_change_sticky_header_script', 100 );
function wp_change_sticky_header_script() {
   wp_deregister_script( 'avia-sticky-header' );
   wp_enqueue_script( 'avia-sticky-header-child', get_stylesheet_directory_uri().'/js/avia-snippet-sticky-header.js', array('avia-default'), $vn, true);
}

5) Schauen ob irgendwo (Enfold hat auch jetzt implementiert) einige Minimizer laufen (BWP-Minify etc oder Caching-Tools) –
Cache überall auch am Browser löschen.
6) Nachschauen ob der gewünschte Endpunkt von 100px erreicht wird.

this is something i do always add to functions.php of child-theme

function admin_head_mod() {
echo '<style type="text/css">
#avia_quick_css .avia_description {float: none;margin-bottom: 20px !important;padding-left: 0 !important;width: 98%}
#avia_quick_css .avia_control {float: left;max-width: 98% !important;width: 98% !important}
.avia_footer_links li {float: left;padding-right: 20px}
.avia_footer .avia_footer_save {float: left}
.avia_reset {pointer-events: none !important }
</style>';
}
add_action('admin_head', 'admin_head_mod');

the last rule
.avia_reset {pointer-events: none !important }
The last line makes sure that you do not accidentally press “Reset all options”
and the save button is best on left hand because on smaller screens its out of screen and you have to scroll to right side to press save