What's the best way to do this?

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)

better if the image can be masked then use a png image in a color-section with no padding ! Do not use the sligthly increase the image on hover option, because i want that only the image got the hover increase.
give the color-section a gradient background. to have the image on the bottom of the color-section and to have no overlay on hovering do this to quick css:
(adjust the page/post to your givings – be careful the avia_transform class is a html class)

.avia_transform .postid-32650 a:hover .image-overlay {
  display: none !important;
}

.postid-32650 a.avia_image.lightbox-added img {
    transition: all 1s ease-in-out;
}

.postid-32650 a.avia_image.lightbox-added:hover img {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    transition: all 1s ease-in-out;
}

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

It would have been nice to get an answer not only from mods here!
I’m really thinking about not actively standing up for other issues any more. If I should have another problem of my own, then I always find competent contacts in the mods here – and the rest doesn’t interest me anymore. Frankly – dear co-users of Enfold – is it so difficult to give feedback on an answer?

thanks for feedback