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 
Any hints on how? 
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
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.
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>
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.
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.
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.