Video background header: buttons not working + text not selectable

**Alex Maxim** · Feb 2nd, 2019, 08:56 PM

Originally Posted by sunfighter

One of the problems with using positioning, it pulls the object out of the normal flow of things and almost always depends the content use of it to make things fit. I personally would have used css grid.
Anyway I re - positioned elements in the HTML and changed things in the CSS. You can use margin-top again as you like.

Code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#myHeader h1 {
    font: bold 3.1rem serf;
    margin-top: 120px;
}
#myHeader h2 {
    font:bold 1.13rem Franklin Gothic Medium;
}
.button {
  background-color: #008cba;
  border: none;
  color: white;
  text-align: center;
  display: inline-block;
  border-radius: 12px;
  font-size: 16px;
}
#the_button{
display: flex;
justify-content: center;
display: height : ;
width : ;inline-block;
}
.button:hover{
    background-color: pink;
    color:black;
}
#container{
	object-fit: cover;
}
#top_main{
position: absolute;
top:0px;
left:20px;
}
#AllTheRest{
    color:red;
}
</style>
</head>

<body>
<div id="container">
    <video autoplay loop id="video-background" muted plays-inline>
        <source src="http://mediolana.com/sites/all/themes/Mediolana/images/Advertising/HGFLP/Higher Grades Faster!™ (Mediolana® Productivity + Organisation Luxury Product Secret Launch™ Movie).mov" type="video/mp4">
    </video>
<div id="top_main">
	<div id="myHeader">
		<h1>GET HIGHER GRADES FASTER!™</h1>
		<h2>Grab the world's only educational product featuring five international fashion models.</h2>
	</div>

	<div id="the_button">
		<form action="http://mediolana.com">
			<input class="button" type="submit" value="➠Order Now!"></input>
		</form>
	</div>
</div>
</div>
<div id="AllTheRest">
    <p>All the news that fits</p>
    <p>All the news that fits</p>
    <p>All the news that fits</p>
    <p>All the news that fits</p>
    <p>All the news that fits</p>
</div>
</body> 
</html>

Dear Mr Sunfighter,
This looks great now!

Thank you so much for taking the time and trouble to explain and illustrate this issue to us. It is enormously appreciated!

I am so glad to have found this forum. Places like this should be what the Internet is all about, and remind me of that early idealism.

I look forward to exploring this space more in the near future.

Check you soon!

With very best wishes/AM

**Alex Maxim** · Feb 8th, 2019, 08:11 PM

Hey there guys,
I hope that this message finds you all in excellent spirits, and that you are having a superb start to the weekend.

By way of an update, we tested the video background code on desktop computers, and it looks more than great.

One problem remains, however: it does not display correctly on laptops, tablets or smartphones. Essentially, what happens is that the smaller the display, the more the video gets chopped off. It doesn't adjust to the size of the display.

We tried substituting our container and video CSS tags with those from the winning solution here:

https://stackoverflow.com/questions/...een-resolution

However, this just resulted in our video background being magnified to the point where nothing was discernible.

We also tried defining the video using '100VH' and '100VW' for height and width respectively. But this just had the effect of making our video tiny on all displays.

The present version of our code is as follows:

<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#myHeader h1 {
font-family: HelveticaNeue-CondensedBold, sans-serif;
color: white;
margin-top: 120px;
text-align: center;
}
#myHeader h2 {
font:bold 1.13rem Franklin Gothic Book;
color: white;
text-align: center;
}
.button {
background: rgba(255, 51, 102, 0.2);
opacity: 50%;
border: 1px solid;
color: white;
font-family: HelveticaNeue-CondensedBold, sans-serif;
//padding: 10px 0;
text-align: center;
display: inline-block;
border-radius: 2px;
font-size: 20px;
}
#tom{
display: flex;
justify-content: center;
display: :inline-block;
}
.button:hover{
background: rgba(138, 255, 188, 0.9);
color:white;
}
#container{
object-fit: cover;
}

video{
position: absolute;
top:0px;
z-index: -1;
}
</style>
</head>

<body>
<div id="container">
<first id="myHeader">
<h1>GET HIGHER GRADES FASTER!™*</h1>
<h2>*Grab the world's only educational product featuring five international fashion models.</h2>
</first><br>

<div id="tom">
<form action="https://mediolana.myshopify.com/products/higher-grades-faster-%E2%84%A2">
<input class="button" type="submit" value="➠Order Now!"></input>
</form>
</div>
<video autoplay loop id="video-background" muted plays-inline>
<source src="http://mediolana.com/sites/all/themes/Mediolana/images/Advertising/HGFLP/Higher Grades Faster!™ (Mediolana® Productivity + Organisation Luxury Product Secret Launch™ Movie)_Compressed.mp4"
type="video/mp4">
</video>

Does anyone have any suggestions as to what we can do to get the video background to scale correctly across different sized displays?

As ever, any guidance would be sincerely appreciated. Thank you for taking the time to read this post!

**coothead** · Feb 8th, 2019, 08:34 PM

Hi there Alex Maxim,

the video example that I gave you in post #5
scaled correctly on all devices.

coothead

**Alex Maxim** · Feb 8th, 2019, 08:57 PM

Originally Posted by coothead

Hi there Alex Maxim,

the video example that I gave you in post #5
scaled correctly on all devices.

coothead

Dear Mr Coothead,
We cannot thank you enough for your kind and brilliantly accurate response! You are absolutely right. We enormously appreciate you enclosing the CSS with the compressed video clip!

Just in case this is of any use to anyone reading this, our corrected background video CSS with text and a CTA button overlaid is now as follows:

video{
position: absolute;
top:0px;
z-index: -1;
display: block;
width:100%;
height:auto;
}

(All coders please note: the z-index: -1; snippet is crucial, as otherwise any CTA text or buttons will not display.)

With very best wishes/AM

Thread: Video background header: buttons not working + text not selectable

Thread Tools

Rate This Thread

Users who have thanked coothead for this post:

Tags for this Thread

Posting Permissions