Full Width Video Background Overflow and Text Overlapping

toad78 · January 19, 2018, 11:48pm

I don’t have a url for you to go to, but if you look at the attached image, you can see my problem.

I do want the video to fill the height of the screen, but below the header. It seems that the main content is layering over the video and then the video is too long.

Something wrong with the code?

Code:

.videoslide:before, .videoslide:after {
    content: ""!important;
    position: absolute!important;
    left: 0!important;
    top: 0!important;
    right: 0!important;
    bottom: 0!important;
    background: rgba(0,0,0,0.35)!important;
    z-index: -1!important;
    pointer-events: none!important;
}
.video-background {
 background: #000;
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: -99;
}
.video-foreground,
.video-background iframe {
 position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
#vidtop-content {
	top: 0;
	color: #fff;
}
.vid-info {
	position: absolute;
    top: 25%;
    right: 0;
    max-width: 960px;
    width: 100%;
    color: #fff;
	text-align: center;
    left: 0;
    margin: auto;
}
.vid-info h1 {
	font-size: 3.889rem;
	font-weight: 700;
	margin-top: 0;
	margin-bottom: 20px;
	line-height: 1.2;
}
p.unpar {
    font-size: 1.111rem;
    color: #30a6e3;
}
p.itsol {
    font-size: 1.556rem;
    line-height: 1.4;
	margin-bottom: 46px;
}
.bts {
	margin-bottom: 2em;
}
.vid-info a {
	color: #fff;
	text-decoration: none;
	background: transparent;
	transition: .6s background;
	text-align: center;
}
.logs {
	text-align: center;
}
.logs img {
	display: inline-block;
	margin-right: 1.2em;
}
.logs img:last-child {
	margin-right: 0;
}
@media (min-aspect-ratio: 16/9) {
  .video-foreground { height: 300%; top: -100%; }
}
@media (max-aspect-ratio: 16/9) {
  .video-foreground { width: 300%; left: -100%; }
}
@media all and (max-width: 600px) {
.vid-info { width: 50%; padding: .5rem; }
.vid-info h1 { margin-bottom: .2rem; }
}
@media all and (max-width: 500px) {
.vid-info .acronym { display: none; }
}

<div class="videoslide">
					<div class="video-background">
	<div class="video-foreground">
		<iframe src="https://player.vimeo.com/video/241717140?autoplay=1&amp;loop=1&amp;title=0&amp;byline=0&amp;portrait=0" width="3600" height="2025" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="allowfullscreen"></iframe>
	</div>
</div><div class="vid-info">
	<p class="unpar">Unparalleled IT Support For Small to Medium-Sized Businesses in Phoenix, Scottsdale, and Tempe</p>
	<h1>An IT partner who’s at<br>your service</h1>
	<p class="itsol"><strong>We care about your business like it’s our business,</strong> by providing straightforward and reliable IT solutions motivated by your happiness.</p>
	<p class="bts"><a href="#" class="btn btn-lg slide">Learn more</a><a href="#" class="btn btn-lg slide">Get started now</a></p>
	<p class="logs"><img src="/mytek/images/landing_page/BBB-logo.png" alt="Mytek | Better Business Bureau"><img src="/mytek/images/landing_page/Inc5000-logo.png" alt="Mytek | Inc. 5000"><img src="/mytek/images/landing_page/RankingAZ-logo.png" alt="Mytek | Arizona Ranking"></p>
</div>
				</div>

PaulOB · January 20, 2018, 9:23am

Can you explain what you want to happen exactly as its not clear from your description?

Do you mean you want the video to start after the header and then continue to the bottom of the viewport? Then you want your main content to start below the video so that you have to scroll to reach it?

Or as is usually the case you want your content layered on top of the video with the video appearing as the background?

PaulOB · January 20, 2018, 11:33am

Just tested the code you are using and its still unclear what you want?

If you want the main content text to start below the fold then do something like this.

.main{padding-top:100vh}/* viewport:height*/

<div class="main">
  <p>testing</p>
  <p>testing</p>
  <p>testing</p>
  <p>testing</p>
</div>

Of course as your video is fixed positioned it will not move and will always occupy the background of the viewport. If you want the video to scroll away then you will need to remove the fixed positioning and use another method.

It also means that as the screensize gets smaller your initial overlay text will be too large to fit in the viewport so you will need to address that issue with media queries etc and make it fit better.

toad78 · January 20, 2018, 9:39pm

Thank you for getting back to me, PaulOB.

What I’m referring to is this text:

That text should be BELOW the video and not behind the intro text layer.

What I would like is the video to display below the header and can take the height of the browser screen. The resizing for mobile devices would be implemented with the use of both em and rem when I get the video issue solved.

Thank you.

toad78 · January 20, 2018, 10:41pm

This seems to work, but I’m going to do more testing:

.videoslide {
	position: relative;
	height: 100vh;
	overflow: hidden;
}
.videoslide:before, .videoslide:after {
    content: ""!important;
    position: absolute!important;
    left: 0!important;
    top: 0!important;
    right: 0!important;
    bottom: 0!important;
    background: rgba(0,0,0,0.35)!important;
    z-index: -1!important;
    pointer-events: none!important;
}
.video-background {
 background: #000;
 position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: -99;
}
.video-foreground,
.video-background iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
#vidtop-content {
	top: 0;
	color: #fff;
}
.vid-info {
	position: absolute;
    top: 25%;
    right: 0;
    max-width: 960px;
    width: 100%;
    color: #fff;
	text-align: center;
    left: 0;
    margin: auto;
}
@media (min-aspect-ratio: 16/9) {
  .video-foreground { height: 300%; top: -100%; }
}
@media (max-aspect-ratio: 16/9) {
  .video-foreground { width: 300%; left: -100%; }
}

PaulOB · January 21, 2018, 5:47pm

If I understand correctly you want a header outside of the video and you can do that like this.

Should work in IE11+ modern browsers. The video will start under below the header (wherever that may be) and will go down to the bottom of the viewport unless the text content is taller than the viewport and the video will stretch down with the content rather than cutting the content off or having it overflow.

(IE11 required extra divs to make it work)
(Needs thorough testing as only knocked it up quickly. :))

The youtube video code is based on Dudley Storey’s example which it seems you were using.

toad78 · January 23, 2018, 7:52pm

Thank you, PaulOB.

Yes, I was trying to adopt Dudley Storey’s example, which seems to work with the exception of the text that overlapped (which I did fix).

In your example, there seems to be a lot more surrounding containers used for those elements, don’t you think?

PaulOB · January 23, 2018, 8:07pm

Yes they are needed to create the table-row structure which must have a table-row followed by a table-cell in order to utilise the stretching and collapsing behaviour of tables. You can in some cases omit the table row but you need at least one otherwise cells go horizontal. The other extra div were as I mentioned for IE11 which was misbehaving.

In the end though an extra div here and there is of no consequence unless you are consistently adding superfluous wrappers.

toad78 · January 24, 2018, 4:59pm

PaulOB,
I seem to be having a little trouble with the video content not being responsive on the width scale. Meaning, even if the screen size gets smaller, the text should wrap nonetheless. That’s not happening in this case with smaller devices. Instead it’s running off to the side.

PaulOB · January 24, 2018, 5:05pm

I’ll need to see your page as that doesn’t happen in my codepen demo.

Sounds as though you still have a width in there somewhere which should have been fluid. Or you have an unbroken element or image that is wider than the viewport and should have been responsive.

toad78 · January 24, 2018, 5:34pm

Sounds as though you still have a width in there somewhere which should have been fluid…Or you have an unbroken element or image that is wider than the viewport…

Well that’s what I was figuring, but I don’t see any fixed widths. As for the elements within that video container, I’m still searching but appreciate the second set of eyes.

Try here.

toad78 · January 24, 2018, 6:48pm

It’s caused by the form on the bottom with the class “.dfbeb”. Still figuring out how to override.

PaulOB · January 24, 2018, 6:52pm

Its the button which is pushing the page wide.

Try this:

#jcfc_btn_IT_Happiness_Assessment{
white-space:normal;
}

toad78 · January 24, 2018, 6:57pm

Thank you for that, PaulOB. The reason why I suspected it was the “.dfbeb” was when I went through the Developer Tools, I saw that this has flexible px width. When I added ‘display: none’, the problem disappeared. Never thought it was the button.

toad78 · January 24, 2018, 7:04pm

Okay, so now that’s fixed, I’m seeing on a mobile device that the video container is hiding the video content. I’m assuming that this is caused by the way the ‘vh’ is being handled? Screenshots:

iPhone 6:

iPhone 6s:

Galaxy S7:

PaulOB · January 24, 2018, 7:53pm

Reduce the size of the heading text and reduce the button sizes so that they fit side by side on smaller screens.

You only have little limited space on a small device so adjust the content to make better use of it. Indeed you may want to simplify the text for smaller screens or omit some details.

There is only so much space to play with when you want this 100% effect and you don’t want the text to overflow below the fold.

You should be able to achieve that with a few well chosen media queries

system · April 26, 2018, 5:42am

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.