Full-width videos?

Is it possible to implement a full-width video option (for Vimeo and Youtube embeds) in a Ghost theme? … seems like this would be a very desirable feature, to be used along with the full-width photo option.

I’m not a developer, but I need to know if this is a feasible request before hiring someone to help me modify a theme.

Yes this is possible with CSS :relaxed:

Any hints on how? :slight_smile:

You could make whichever element that contains your post content as wide as you want the video to be, and then set the .kg-embed-card width to 100% and then I guess you’d want to limit the width of your content by selecting the paragraph and heading etc… tags within it and giving them a max-width (and probably a margin 0 auto??).

I am rubbish at CSS though and I’m sure someone else on this forum would have a better way

1 Like

Darn … sounds not simple at all.

It’s hard to answer because the CSS elements are labelled within the themes. This is not universal.

Thanks! I think I’m giving up on this. Wish it were a native feature in Casper, which is the theme I want to use. It appears that I will not be able to launch a GhostPro site because it’s imperative that I be able to embed full-width videos.

@lang if you’re using Casper the simplest solution may be to use a HTML card in the editor to insert the video embed code directly. You can then wrap it in a full-width figure element, eg:

<figure class="kg-card-embed" style="width: 100vw">
    ...insert your video embed code here...
</figure>

If you’re not using Casper you would need to adjust the figure styles to fit your use-case.

2 Likes

Thank you Kevin! That works splendidly and it’s dead simple.

Another quick question: How do I get a featured post to “stick” at the top of the home page (using Casper), so that it stays there in wide format, even when I add new posts?

For example, I would like my intro post to stay in the top position, just as you can see here: https://langelliott.ghost.io

This worked for me:
<iframe class=“bn miw-100” scrolling=“no” style=“width: 100%; height: 555px” src="[video_url]" allow=“accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture” allowfullscreen=""></iframe>

1 Like

To those still struggling with this, I used the following code as an HMTL card in Ghost to embed video from Cloudflare Streaming (the original embed code copied from Cloudflare produces a smaller version of the video when previewed):

<div style="position: relative; overflow: hidden; width: 100%; padding-top: 62.5%;">
    <iframe src="web/link/to/your/video" style="border: none; position: absolute; top: 0; height: 100%; width: 100%;"  allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;" allowfullscreen="true">
    </iframe>
</div>

Just replace web/link/to/your/video with the URL to your video on Cloudflare Streaming.

To alter the aspect ratio:

padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
padding-top: 75%; /* 4:3 Aspect Ratio */
padding-top: 66.66%; /* 3:2 Aspect Ratio */
padding-top: 100%; /* 1:1 Aspect Ratio */

In an HTML card, I usually put the following:

<figure class="kg-card kg-width-full">
<iframe width="560" height="315" src="https://www.youtube.com/embed/_1wGqB0fOJs" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</figure>

Using just the class kg-width-full seems to do the trick!

I can confirm it works with the Edition theme.

And it works for other embeds too, not just YouTube.

1 Like

The example by @hkalant worked with the Casper theme. If you are concerned about forgetting the class names to use, the opening <figure> and closing </figure> tags can each be made into an HTML snippet, like “Full Width - Begin” and “Full Width - End”. To place the whole bit of code, first select the first HTML Snippet block, then paste the iframe into it’s own HTML card, then select the ending snippet block.