Eliminating left and right margins of header video in Twenty Seventeen theme

ericmachmer · Member · Feb 1, 2018 at 9:22 pm
Copy link

Add topic to favorites
Hi, how can the header video be made to appear flush to the right and left margins of this website: https://thisbeautifulthingofours.com ?

Does the video itself need to be exactly 2000 × 1200 pixels or can it be stretched to expand flush to the margins via CSS?

Thank you!

The blog I need help with is: (visible only to logged in users)
dphyled · Member · Feb 2, 2018 at 6:27 am
Copy link
Hello ericmachmer,

For video, if the browser window isn’t at the exact same aspect ratio, then it needs to either add space above/below (when the video is not as tall as the window), or to the left and right (when the video is not as wide).

Alternatively, through CSS, another option would be to keep it filling the container, but cutting off parts of the video as necessary based on the window dimensions…

Are you on a Premium or Business WordPress.com plan with access to custom CSS?

If you are, can you try the following CSS Snippet?
```
#wp-custom-header-video {
    width: 177.77777778vh;
    min-width: 100%;
    height: 56.25vw;
    min-height: 100%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
```
It was based on the following post: https://stackoverflow.com/questions/33451481/scale-and-reposition-iframe-like-background-size-cover

Please let me know how it goes.

Best,
-Kel
ericmachmer · Member · Feb 2, 2018 at 6:42 am
Copy link
Thank you! Much appreciated!

No items found.