Feature a Video instead of a photo in a post header

Themes
2

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!

3 Likes