How do I embed a full-page-wide video in QF theme?

[ie377]

In QF-fashion themed Publii site I can post images under full-image class that would make an image take almost full width of the page.

How do I do that for a video that is hosted on my server and that I embed in the page?

I tried giving it 100% width and height but it doesn't work that way. Please help me find a way to do this. Couldn't find this topic in the old Publii forum.

[example-user30]

I suspect you could do this with javascript by altering the DOM once the page has loaded. I did it manually by changing two lines in the inspector in Chrome:

I changed the post__video class to post__image post__image--wide. Also I changed the size of the video in the next line down in the iframe to something bigger than default. This is the result:

• Brad

[candidexmedia]

Hi there! Is your page online? Mind sharing a link so we can inspect?

It could be a video class thing, video container class thing, a page width constraint thing... Easier to diagnose with a live page. 😊

[ie377]

Sure, thanks, here's the link: https://stringerboat.ru/kater-kraken-rk-1200-skorost-moshch-i-bezopasnost/

[candidexmedia]

@ie377 Thanks for the link! Try this:

Apply to all videos (simpler)

1. Insert your video normally. Do not give it a post__image class. Instead, the <video> element will automatically be wrapped in a <figure class="post__video"> element.

2. In Custom CSS (or main.css, for a theme override), add:

   @media (min-width: 56.25em) {
     .post__video {
     width: 150%; /* You can go wider here, but the media query breakpoint will have to be adjusted to ensure that the video isn't cut off on smaller screens */
     left: 50%;
     transform: translateX(-50%);
     }
   }

Apply to certain videos only

Note: The above instructions will apply the new sizing to all your videos. To only apply this to certain videos, you could create a new class as such (in the example below, I created a "post__video--full" class):

```css
@media (min-width: 56.25em) {
  .post__video--full {
  width: 150%; /* You can go wider here, but the media query breakpoint will have to be adjusted to ensure that the video isn't cut off on smaller screens */
  left: 50%;
  transform: translateX(-50%);
  }
}
```

And then in your WYSIWYG editor, you would add the class to the <figure> of the desired clip, so it goes from this:

<figure class="post__video">
  <video controls="controls" width="300" height="150" data-mce-fragment="1">
    <source src="https://stringerboat.ru/kraken.mp4" type="video/mp4" />
  </video>
</figure>

To this:

<figure class="post__video post__video--full">
  <video controls="controls" width="300" height="150" data-mce-fragment="1">
    <source src="https://stringerboat.ru/kraken.mp4" type="video/mp4" />
  </video>
</figure>

---

This StackOverflow answer helped me: https://stackoverflow.com/a/48608339/16709513