Feature a Video instead of a photo in a post header

Hi,

i am restarting the discussion : Has anyone found a reasonably easy way to feature a video instead of an image?

@Caucasus-and-Mercury . suggested : " converting a short movie clip to a gif with gifski and upload." which is a simple and efficient solution.

Does anybody has a way to find the video url and set it as a feature image ? It sounds to me requiring something like finding the first video url in a post and setting that url as the header background image.

?

Hi there! You could certainly do that by adding a HTML card to the top of the page and then use JavaScript to move it into the background. This piece of HTML will autoplay the video, keep it muted and make it loop:

<video
       autoplay
       muted
       loop
       controls
       src="/my/video/path.mp4"
>
    Your browser does not support this video
</video>

and then a bit of JavaScript to swap out the feature image:

const feature = document.querySelector('.post-full-image');

feature.insertAdjacentElement('afterbegin', document.querySelector('video'));

feature.querySelector('video + img').style.display = 'none';

I did this with the default Casper theme, which will need a little CSS to make <video> elements fit inside the <div class="post-full-image"> element on the page:

.post-full-image video {
    max-width: 100%;
    height: auto;
}

Hope this helps!

Thanks. I will implement this and let you know,

What I finally ended up doing was creating a custom template where the hero/feature image is gone and just used the inline video embed up top. Worked well for what I was doing but might not work if you want the video as a background.

Hi james,

That looks like what i would like to implement. can you please elaborate on " just used the inline video embed up top" ?