Banner Video in the Body

anchorhill · Member · Sep 8, 2018 at 6:12 pm
Copy link

Add topic to favorites
Hi,

I was wondering if it would be possible to get a banner length video in the body of my homepage. The theme I’m using is designed for one in the header, but our logo gets in the way of the good stuff. So I want to put the video in the body flushed to the top so that it is touching the header. If possible, I would love to layer the navigation menu so it is in front of the video while remaining in its current position.

Thank you for your time.

The blog I need help with is: (visible only to logged in users)
gemmacevans · Member · Sep 9, 2018 at 5:07 pm
Copy link
Hi anchorhill,

There is currently a full width video on the homepage of anchorhilldev.wordpress.com, so it looks like you’ve got this sorted now. If you need any further help, you are welcome to reply here or start a new chat :)
anchorhill · Member · Sep 10, 2018 at 10:26 pm
Copy link
Gotcha.

That said, for a full width video, I am still seeing the white background in the left and right margins of the video. I’m trying to get the video to cover the entire horizontal width of the home page.

Thank you for your time.
dkmyta · Member · Sep 10, 2018 at 10:52 pm
Copy link
Hey there,

If you are Premium or Business plan holder and have access to Custom CSS, the following will extend your video to 100% of your browser view width:
```
.layout-content-full-width.home.page .content-area-inside .post-35 {
    padding: 0;
}

.layout-content-full-width.home.page .content-area-inside .entry-content {
    margin: 0;
}

iframe {
    width: 100vw;
}
```
Let me know if it works for you or if have any other tweaks you would like to incorporate.

Cheers
gemmacevans · Member · Sep 11, 2018 at 10:00 am
Copy link
Just to check — it sounds like you may want the video to take up the full width of the browser (rather than the content area), so you see no white space either side. Is that correct?

@codekmyta — thanks for helping with CSS :)
anchorhill · Member · Sep 11, 2018 at 9:34 pm
Copy link
@gemmaevans
Yeah, that’s what I’m trying to go for. I’m trying to get it to fill the entire width of the browser, similar to our old website (https://anchorhill.org/). Which, upon closer look, it doesn’t do it completely either haha. If I could get it to that length, that would be great too.

@codekmyta
So I entered CSS and it doesn’t seem to make it full width but just shifted it to the left.

Thank you both so much for your help.
dkmyta · Member · Sep 11, 2018 at 9:53 pm
Copy link
Hey again,

Please double check the CSS you have entered, I am seeing one error with the declaration for .post-35, you have ‘padding: none 0;’ instead of just ‘padding: 0;’. Also, its seems as the max-width setting for the iframe is causing some trouble.

For simplicity please remove the original 3 lines of CSS and replace it with the following:
```
.layout-content-full-width.home.page .content-area-inside .post-35 {
    padding: 0;
}

.layout-content-full-width.home.page .content-area-inside .entry-content {
    margin: 0;
}

iframe {
    max-width: 100vw;
    width: 100vw;
}
```
I am getting this when this CSS is in place: http://prntscr.com/ktb4uc. Let us know if the results are the same.

Cheers
anchorhill · Member · Sep 12, 2018 at 5:22 pm
Copy link
Perfect. Just had to delete some of previous garbage css I was testing out before to make it work.

Thank you both so very much.

No items found.