I've successfully created a div with a video as the background, however, the video is only visible when hovering over the div.
Everything is functioning correctly and here is the CSS code I'm using:
.row .col .background-inner{
background:url('https://meivcore.pt/novo/wp-content/uploads/2017/11/mecanica-small-filtro.jpg');
}
.row .col .background-inner .video{
display:none;
}
.row .col .uncoltable:hover .video{
display:block;
}
When I hover over the div, the video plays on loop, which is expected. Is there a way to stop this looping behavior? Ideally, I would like to hover over the div, watch the video play once, and then stop on the last frame.