# Full-width videos?

**URL:** <https://forum.ghost.org/t/full-width-videos/7978>\
**Category:** Developer help\
**Created:** [June 26, 2019, 10:58pm UTC](https://forum.ghost.org/t/full-width-videos/7978 "2019-06-26T22:58:33Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![lang](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/lang/32/3920_2.png) [@lang](https://forum.ghost.org/u/lang)\
**Post date:** [June 26, 2019, 10:58pm UTC](https://forum.ghost.org/t/full-width-videos/7978/1 "2019-06-26T22:58:33Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![egg](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/egg/32/1691_2.png) [@egg](https://forum.ghost.org/u/egg)\
**Post date:** [June 27, 2019, 7:48am UTC](https://forum.ghost.org/t/full-width-videos/7978/2 "2019-06-27T07:48:57Z")

</div>

Yes this is possible with CSS 😌

---

<div class="post-metadata">

**Author:** ![lost](https://avatars.discourse-cdn.com/v4/letter/l/22d042/32.png) [@lost](https://forum.ghost.org/u/lost)\
**Post date:** [June 27, 2019, 10:28am UTC](https://forum.ghost.org/t/full-width-videos/7978/3 "2019-06-27T10:28:02Z")

</div>

Any hints on how? 🙂

---

<div class="post-metadata">

**Author:** ![egg](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/egg/32/1691_2.png) [@egg](https://forum.ghost.org/u/egg)\
**Post date:** [June 27, 2019, 10:33am UTC](https://forum.ghost.org/t/full-width-videos/7978/4 "2019-06-27T10:33:50Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![lang](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/lang/32/3920_2.png) [@lang](https://forum.ghost.org/u/lang)\
**Post date:** [June 27, 2019, 1:12pm UTC](https://forum.ghost.org/t/full-width-videos/7978/5 "2019-06-27T13:12:55Z")

</div>

Darn … sounds not simple at all.

---

<div class="post-metadata">

**Author:** ![pascalandy](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/pascalandy/32/444_2.png) [@pascalandy](https://forum.ghost.org/u/pascalandy)\
**Post date:** [June 28, 2019, 4:34pm UTC](https://forum.ghost.org/t/full-width-videos/7978/6 "2019-06-28T16:34:14Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![lang](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/lang/32/3920_2.png) [@lang](https://forum.ghost.org/u/lang)\
**Post date:** [June 28, 2019, 4:52pm UTC](https://forum.ghost.org/t/full-width-videos/7978/7 "2019-06-28T16:52:11Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Kevin](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/kevin/32/32_2.png) [@Kevin](https://forum.ghost.org/u/Kevin)\
**Post date:** [July 1, 2019, 11:01am UTC](https://forum.ghost.org/t/full-width-videos/7978/8 "2019-07-01T11:01:47Z")

</div>

@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:

```auto
<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.

---

<div class="post-metadata">

**Author:** ![lang](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/lang/32/3920_2.png) [@lang](https://forum.ghost.org/u/lang)\
**Post date:** [July 1, 2019, 1:37pm UTC](https://forum.ghost.org/t/full-width-videos/7978/9 "2019-07-01T13:37:42Z")

</div>

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](https://langelliott.ghost.io)

---

<div class="post-metadata">

**Author:** ![icoloma](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/icoloma/32/11642_2.png) [@icoloma](https://forum.ghost.org/u/icoloma)\
**Post date:** [February 12, 2021, 10:54am UTC](https://forum.ghost.org/t/full-width-videos/7978/10 "2021-02-12T10:54:18Z")

</div>

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\>

---

<div class="post-metadata">

**Author:** ![xlh155](https://avatars.discourse-cdn.com/v4/letter/x/898d66/32.png) [@xlh155](https://forum.ghost.org/u/xlh155)\
**Post date:** [July 27, 2021, 8:59pm UTC](https://forum.ghost.org/t/full-width-videos/7978/11 "2021-07-27T20:59:14Z")

</div>

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):

```auto
<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](https://www.w3schools.com/howto/howto_css_responsive_iframes.asp):

```auto
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 */

```

---

<div class="post-metadata">

**Author:** ![hkalant](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/hkalant/32/12905_2.png) [@hkalant](https://forum.ghost.org/u/hkalant)\
**Post date:** [July 28, 2021, 12:05am UTC](https://forum.ghost.org/t/full-width-videos/7978/12 "2021-07-28T00:05:16Z")

</div>

In an HTML card, I usually put the following:

```auto
<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.

---

<div class="post-metadata">

**Author:** ![markstos](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/markstos/32/18182_2.png) [@markstos](https://forum.ghost.org/u/markstos)\
**Post date:** [June 18, 2022, 7:08pm UTC](https://forum.ghost.org/t/full-width-videos/7978/13 "2022-06-18T19:08:58Z")

</div>

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.