take a fullwidth-slideshow.
you can add to the image on caption a manual link (choose apply link to image) – add to the video link at the end a &iframe=true f.e.:

https://player.vimeo.com/video/262210925?autoplay=1&loop=1&title=0&byline=0&portrait=0&iframe=true

see here: https://webers-testseite.de/huawei/

to pimp the whole thing a bit you can give to the hover effect some scalings – (get rid of the overlay white)

i loaded the fa from maxcdn and the styles from the link ismael gave:

add_action( 'wp_enqueue_scripts', 'enqueue_awesome' );
function enqueue_awesome() {
  wp_enqueue_style( 'prefix-font-awesome', 'https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css', array(), '4.7.0' );
  wp_enqueue_style( 'font-awesome-styles', 'https://unpkg.com/@coreui/coreui/dist/css/coreui.min.css', array(), '1.0' );
}

the only thing to correct was in quick css a bit:

.btn { font-weight: 600 !important}
.btn-brand i { font-size: 22px }
.btn-brand i { margin: -.375rem .75rem -.375rem -.75rem }

and don’t make line-breaks in text-field:
<button class="btn btn-brand btn-youtube" type="button"><i class="fa fa-youtube"></i>Youtube</button>

Edit : i removed the code above from my test-page now – because It does not meet the requirements of the GDPR

the function above is a general tag replacement function under preventing every attribut set on the original tag
the lines of replacement are only separated by semicolon. so for example if you like to switch in the footer from h3 headings to h2 headings only add in the function:

replaceElementTag('h3.widgettitle', '<h2></h2>');

this solution ( you can get rid of the if is_page when you want to be active on all sites) will work.
On future Projects you can use my edited alb elements where you have the choice to set the h-tag as you like!
https://webers-testseite.de/edited-enfold-alb-elements/#sliders

If you have no concerns about GDPR, you can enqueue the styles of Fontawesome via CDN.
So you can use it manual – but problem would be that these sources need the newest jQuery – not that common one that Enfold uses !
You can do it via functions.php of your child-theme:

add_action( 'wp_enqueue_scripts', 'enqueue_awesome' );
function enqueue_awesome() {
  wp_enqueue_style( 'prefix-font-awesome', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css', array(), '4.7.0' );
}

So my Advice is to use fontello fontawesome – import that to Enfold and use it with Enfold buttons.
To style the buttons a bit more you can do that: https://webers-testseite.de/buttons/

these are Enfold Buttons Alb with light-transparent layout and a bit of css

by the way a bit offtopic – wouldn’t it be nice to have this on the prev/next navigation beween posts/portfolios.
maybe to the anchor itself

function add_rel_attribute(){
?>
<script>
(function($){
	$('a.avia-post-prev').attr('rel', 'prev');
	$('a.avia-post-next').attr('rel', 'next');
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'add_rel_attribute');

by the way: this should not happen if you got a newer wordpress version.
In former times – yes i do have that too, but now they gave some error-messages out to solve those issue.

These issues can happen if you are having wrong brackets or forgotton semicolon.
if you got double function names ( this is probably one of the most common mistakes ) because here on board the code-snippets are often named the same way.
f.e. adding custom widgets to the header – but what if you like to have two widget-areas: all snippet functions here on board named : enfold_customization_header_widget_area

so adding two of them will cause an error (on former times a white screen of death) etc. pp

hope you have adjusted the path ?

On my end : https://webers-testseite.de/weber/whdsolutions/
it seems to work with that:

But I appreciate your kind offer, though. Thank you

I’m just afraid you’re not going to give me as much pleasure as you think.
I have only drunk coffee for years if it was made using a machine with an E61 brewing group.
(mine is a Rocket Espresso Giotto Evoluzione with rotation pump)
Such espresso machines are able to turn even a 100% Arabica into a dreamlike crema.

https://thumb.ibb.co/eV5MjT/crema.jpg
not my Foto (i do not use bottomless filter holders)

And I pimp Starbucks like Amazon.

By the way, Chuck Norris can count to infinity – two times ;)

on selfhosted do this as code in the layer:

<video playsinline autoplay loop muted preload="metadata" style="min-width:100vw; min-height:56vw;" >
 <source src="path_to_your/VARVANI-3D.CG-Showreel-2018.mp4" type="video/mp4">
<img src="path_to_fallback_image/film-fallback.jpg" title="Your browser does not support the video tag">
</video>

this is very important to have: playsinline autoplay loop muted

ok vimeo and youtube do not start here on layerslider.
why do you use the layerslider ? are other layers being superimposed?

by the way is the page working: https://webers-testseite.de/weber/
with a selfhosted video

i ask because good old html5 <video … – there will be chances to be successfull

can you try this in your layer video embed code:

<iframe id="ytplayer" type="text/html" width="100vw" height="56.25vw" src="https://www.youtube.com/embed/YtSo17Wley8?autoplay=1&enablejsapi=1&loop=1&playsinline=1&rel=0&showinfo=0&color=white&iv_load_policy=3" frameborder="0" allowfullscreen></iframe>

see here the second slide with your video: http://webers-testseite.de/weber/archie/

As far as i know the advanced slider can do that for you.
see here a demo: https://webers-testseite.de/weber/
But this is a selfhosted small video, and only the newest browsers for mobile devices ( IOS11 with new Safari f.e.) will play that background video.

On vimeo case : on sharing options you can see the embed options and press settings.
choose responsive and get rid of Author, Image and Title. Choose Autoplay and loop but no textlink !

the code of your video will be:
<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/258140746?autoplay=1&loop=1&title=0&byline=0&portrait=0" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>

Very important now we change in that code something
1) That div will not work – and we do not need it – same thing with the script
2) Change positioning to relative !!!
3) width: 100vw and height: 56.25vw (on 16/9 videos)
4) give the iframe a class: vimeo (on vimeo it seems to be good to scale the iframe a bit to have no borders on full-width at very small screens)
Result:
<iframe class="vimeo" src="https://player.vimeo.com/video/258140746?loop=1&title=0&byline=0&portrait=0" style="position:relative;top:0;left:0;width:100vw;height:56.25vw;" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" frameborder="0"></iframe>

goto Advanced Layerslider make a new slider (responsive with width and height in the aspect ratio of 16/9)
add a video audio layer insert that code above and define that layer as background-video layer.

see result here: https://webers-testseite.de/weber/archie/

do this to quick css:

iframe.vimeo {
    transform: scale(1.02);
}

PPS: i have choosen the way over selfhosted video as background – because of GDPR ( DSGVO) reasons.
all big video hosters (youtube and vimeo) will send data from the visitors to their servers ( on minimum the IP) this is not allowes without an opt-in.

by the way dear Mods why doesn’t this do the job if i want to proof if a portfolio has “frontside” category ???

elseif ( is_singular( 'portfolio' ) && has_term( 'frontside', 'portfolio')  )  {
        $logo = "https://webers-testseite.de/wp-content/uploads/unmute.png"; 
    }