Feature a Video instead of a photo in a post header

Themes
1

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.

?

1 Like
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
3

Thanks. I will implement this and let you know,

4

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.

5

Hi james,

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

6

I used your code to do it with the YouTube video. I replaced ā€˜videoā€™ with ā€˜iframeā€™ and it worked.

But thereā€™s a problem, the video is not the full page width.
Can you tell me how to fix it?

Š”Š½ŠøŠ¼Š¾Šŗ эŠŗрŠ°Š½Š° 2020-01-17 Š² 10.58.22
Š”Š½ŠøŠ¼Š¾Šŗ эŠŗрŠ°Š½Š° 2020-01-17 Š² 10.58.222272Ɨ1446 250 KB

7

Youā€™ll need to use some CSS to make the iframe fit the space Fluid Width Video | CSS-Tricks - CSS-Tricks

However the video itself will be hard to fit in the space fully, which is another reason why people prefer to use actual videos rather than iframe embeds

8

I managed to do what was needed. Thanks for the help.
I changed your code a bit. Am I doing everything right or need it differently?

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

feature.insertAdjacentElement(ā€˜afterbeginā€™, document.querySelector(ā€™.kg-cardā€™));

feature.querySelector(ā€™.kg-card + imgā€™).style.display = ā€˜noneā€™



.post-full-image iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.post-full-image {
position: relative;
padding-bottom: 56.25%;
height: 0;
}

1 Like
9

Wow that looks great! Nice job :clap:

1 Like
10

Hi Adrian. where did you put the code? can it go in code injection or am I totally lost? do you have the full code so I can borrow it?

1 Like
11

Picking up on an old thread, has Post-full-image changed?

Iā€™m trying and failing to replace a header image with video or alternatively embed 100% width/responsive video, if there are any kind sirs out there that have overcome this, please send help.

Thanks

12

Was this easy to do? I would love to know the details @James_Kerley. e.g. did it require coding or something more simple.

13

Yes, this will require coding OR a template that explicitly supports such a thing. As a developer Iā€™d opt to extend the template instead of the workaround proposed by @DavidDarnes only because if you can wield this you may as well just extend the template and that is a far more maintainable and clear solution. In situations where you do not have access to modify the template davidā€™s solution is quite clever.

If you are not familiar with the intricacies of building a custom template OR how the workaround david demonstrated, it would be best to find a template that supports this.

2 Likes
14

Hello :wave:

I am using the ghost ā€œSourceā€ free theme.

The simplest workaround you can do to feature a video from YouTube, Vimeo etc in the header of your actual post page is thisā€¦

You either go to the CODE INJECTION part in a specific post, or you go to the main SETTINGS and change change the code for the entire site, with all posts to be affected.

The code you are adding is simple. What it does is it ā€œHIDESā€ the featured image, which allows you to then just add an embedded video at the ā€œTOPā€ of your page where the featured image was. In the editor page the featured image will still show, this is good because it will allow you to add a thumbnail with a play button icon in an image if you want the HOME page to show a thumbnail with a play button to indicate that the post has a video to play. The code I used is as follows:

<style>

    .gh-article-image img {
    width: 100%;
    display: none!important;}
    
    .gh-article-header {margin-bottom:0px}
    
</style>

Notice I had to adjust the margin at the bottom of the header to make sure the video looked neatly placed on the post page.

And that is it. Very easy to do.

Just be mindful that if you are going to be creating a website for decades, and eventually you want to change the theme, you may have to go back to individual posts CODE INJECTION and amend all of those if you want them to use the new themeā€™s design. Obviously, if you have only used the main settings code injection then this will be easier to just change the once, but you may still have ā€œsomethingā€ that the new theme will need changing to make it look right, just be aware.

Anyhow, this is a great simple fix without getting bogged down in too much coding.

I hope it helps you. I look forward to seeing what you create. Please check out my website CJB.today if you want to see this in action (although by the time you read this I may have changed themes).

Peace & Love - Keep being you!
CJB

1 Like