Put an video in front of a background image and make it both responsive

weldenr1 · October 14, 2016, 10:28am

after googling and lots of trial and error I need to give up and ask
for your help. I have a background picture where I want to place a video
of smaller size in front at a certain position. As I want the page to
be responsive without changing the position of the video in relation to
the background picture, I wonder how both the video and the background
scale in a way that this is achieved. The video is coming from my own
server as html5 and not through an iframe.

The following question/answer seems to be exactly what I need, but I
can’t follow the short answer of the person asking the question and
giving the answer himself in the comments.

Possible solution

Here is my example:

Background picture with video on top at full screen

The way the video is positioned here should stay the same when the
browser size gets smaller, so both background picture and video shall
scale.

Thanks so much for your help!

donboe · October 14, 2016, 9:42pm

Do you have any reference from what you have now? I mean html and css.

ronpat · October 14, 2016, 10:25pm

In a slightly narrower viewport, that video will shrink to the size of a small postage stamp. Are you sure that’s what you have in mind?

Do you have the code to show a video on a web page?

What you are requesting isn’t hard. But I would like to see your code so I can work within it as much as possible before getting creative.

Can you offer us a link to your test site?

weldenr1 · October 15, 2016, 11:46am

I tried so many different things,
but here is the latest:
(If I made stupid things…I’m a total beginner )

<div class="responsive-background">
<img class="img-responsive" src="http://www.milanoperformance.com/uploads/1/0/2/1/10212014/9278866_orig.jpg"
            <div class="video-container">
<video class=”video-responsive” src="testmovie.mp4" autoplay="autoplay " controls="controls ">Your browser can’t play this video.</video>
    </div> 
</div>

<style>

.responsive-background {
    position: relative;
    width: 100%;
    min-width: 70%;
    z-index: -1;
}

.img-responsive {
    position: relative;
    width: 100%;
    min-width: 70%;
    z-index: -1;
    overflow: hidden;
}




.video-container {
    position: relative;
    width: 100%;
    min-width: 70%;
    overflow: hidden;
}

.video-responsive {
    position: absolute;
    top: 400px;
    left: 600px;
    width: 40%;
    overflow: hidden;
}

</style>

weldenr1 · October 15, 2016, 11:53am

Hi ronpat,

why should that happen already at a slightly narrower viewport?
It won’t be displayed on mobile devices.

I hope you can help and build on my posted code.

coothead · October 15, 2016, 2:08pm

Hi there weldenr1,

and a warm welcome to these forums.

Try it like this, possibly…

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<!--<link rel="stylesheet" href="screen.css" media="screen">-->
<style media="screen">
body {
    margin: 0;
 }
#video-container {
    position: relative;
    padding-top: 77.67%;
    background-image: url(http://www.milanoperformance.com/uploads/1/0/2/1/10212014/9278866_orig.jpg);
    background-size: 100% auto;
 }
#video-container video {
    position: absolute;
    top: 75%;
    left: 100%;
    width: 40%;
    transform: translate(-100%,-75%);
 }
@media screen and (max-width: 40em) {
#video-container video {
    width: 60%;
  }
 }
@media screen and (max-width: 30em) {
#video-container video {
    width: 80%;
  }
 }
@media screen and (max-width: 22.5em) {
#video-container video {
    width: 100%;
  }
 }
</style>
</head>
<body> 
<div id="video-container">
 <video src="testmovie.mp4" autoplay controls>Your browser can’t play this video.</video>
</div>
</body>
</html>

coothead

weldenr1 · October 16, 2016, 5:14pm

Coothead, this is just awesome!
Thanks so much for your quick and great answer -
I appreciate that a lot.

I tested it with the actual content (is on a private server where I can’t share links) and it worked after some little adjustments with the container sizes. The only thing which could be improved would be the scrolling bars as you can see in the picture. The code is used as part of a social media community with a dedicated box where I can place content/code, the rest of the website I can’t change. Although the picture and video resize perfectly, the code leaves a white blank space on bottom and on the right wherefore you get these scrolling bars. Any idea?

Gandalf · October 16, 2016, 6:00pm

It might help if you say what little adjustments you needed to make.

coothead · October 16, 2016, 6:05pm

Hi there weldenr1,

Well, checking your code would be an excellent place for
members to start looking for a solution to your problem.

coothead

weldenr1 · October 16, 2016, 6:38pm

Sorry, I should have been more clear.
The only thing I changed was the position of the video-container video from
top= 75% to top=77% and from width=40% to width=38.5% as I need to use another background picture. However, also with exactly your code this “problem” occurs.

#video-container video {

position: absolute;

top: 77%;

left: 100%;

width: 38.5%;

transform: translate(-100%, -75%);

}

coothead · October 16, 2016, 6:51pm

Hi there weldenr1,

I was unable to replicate your problem with the minimal
information that you supplied.

This suggests that there is other code that is creating it.

So, give us the code for the whole page, HTML/CSS, for
us to fully test your problem.

coothead

weldenr1 · October 21, 2016, 3:29pm

Hi coothead,

it is an intranet page, so I first need to hide some data and will post it then. Sorry for my late answer, didnt see the notification mail.

another big issue: as I don’t really get how your code works is there a possibility to implement something like a responsive imagemap as well, either as a real image map or through divs with hyperlinks? I need four rect. boxes for navigation links snd then several circular ones for pictures. is there any way?

coothead · October 21, 2016, 3:35pm

Well, you certainly do not need an image map for your requirements as stated.

CSS can handle both rectangular and circular links.

coothead

weldenr1 · October 21, 2016, 6:36pm

Even better, thats what I hoped.
I tried to place divs at several points on the background, but no success. Can you give me one example of a circular link at any point of the background?

coothead · October 21, 2016, 9:12pm

I certainly can.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<!--<link rel="stylesheet" href="screen.css" media="screen">-->
<style media="screen">
body {
    margin: 0;
 }
#video-container {
    position: relative;
    padding-top: 77.67%;
    background-image: url(http://www.milanoperformance.com/uploads/1/0/2/1/10212014/9278866_orig.jpg);
    background-size: 100% auto;
 }
#video-container ul {
    position: absolute;
    top: 5%;
    display: flex;
    justify-content: space-between;
    width: 90%;
    padding: 0 5%;
    margin: 0;
    list-style: none;
    text-align: center;
 }
#video-container li {
    width: 12.5%;
 } 
#video-container a {
    position: relative;
    display: block;
    width: 100%;
    padding-top: 100%;
    border-radius: 50%;
    background-color: rgba(0,0,0,0.6);
 }
#video-container a span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%); 
    color: #fff;
 }
#video-container video {
    position: absolute;
    top: 85%;
    left: 100%;
    width: 40%;
    transform: translate(-100%,-85%);
 }
@media screen and (max-width: 40em) {
#video-container video {
    width: 60%;
  }
#video-container li {
    width: 20%;
 } 
 }
@media screen and (max-width: 30em) {
#video-container video {
    width: 80%;
  }
 }
@media screen and (max-width: 22.5em) {
#video-container video {
    width: 100%;
  }
 }
</style>
</head>
<body> 
<div id="video-container">
<ul>
 <li><a href="#"><span>link</span></a></li>
 <li><a href="#"><span>link</span></a></li>
 <li><a href="#"><span>link</span></a></li>
 <li><a href="#"><span>link</span></a></li>
</ul>
 <video src="testmovie.mp4" autoplay controls>Your browser can’t play this video.</video>
</div>
</body>
</html>

coothead

weldenr1 · October 25, 2016, 11:08pm

Thanks again for your great support.
I tried to achieve links in different forms and positions and nearly managed to do so,
but now the video position doesn’t react when I change top and left position. And I also can’t manage to get rid of the blank space underneath the background picture, nor can I get the second link from the bottom up in front of the background.

Can you help a stupid beginner once again?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<!--<link rel="stylesheet" href="screen.css" media="screen">-->
<style media="screen">
body {
    margin: 0;
 }
#video-container {
    position: relative;
    padding-top: 77%;
    background-image: url(http://www.milanoperformance.com/uploads/1/0/2/1/10212014/9278866_orig.jpg);
    background-size: 100% auto;
 }
#video-containerb {
    position: relative;

 }
#video-container ul {
    position: absolute;
    top: 50%;
    left: 30%;
    display: flex;

    width: 50%;
    padding: 0 5%;
    margin: 0;
    list-style: none;
    text-align: center;
 }
#video-container ulb {
    position: absolute;
    top: 80%;
    left: 50%;
    display: flex;

    width: 50%;
    padding: 0 5%;
    margin: 0;
    list-style: none;
    text-align: center;
 }
#video-container li {
    width: 30%;
 } 
#video-container lib {
    width: 50%;
 }
#video-container a {
    position: relative;
    display: block;
    width: 100%;
    padding-top: 100%;
    border-radius: 50%;
    background-color: rgba(0,0,0,0.6);
 }
#video-container a span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%); 
    color: #fff;
 }
#video-container ab {
    position: relative;
    display: block;
    width: 100%;
    padding-top: 100%;
    border-radius: 80%;
    background-color: rgba(0,0,0,0.6);
 }
#video-container ab span {
    position: absolute;
    top: 70%;
    left: 70%;
    transform: translate(-50%,-50%); 
    color: #fff;
 }
#video-container video {
    position: absolute;
    top: 0%;
    left: 100%;
    width: 40%;
    transform: translate(-100%,-85%);
 }
@media screen and (max-width: 40em) {
#video-container video {
    width: 60%;
  }

@media screen and (max-width: 30em) {
#video-container video {
    width: 80%;
  }
 }
@media screen and (max-width: 22.5em) {
#video-container video {
    width: 100%;
  }
 }
</style>
</head>
<body> 
<div id="video-container">
<ul>
 <li><a href="#"><span>link</span></a></li>

</ul>
<div id="video-containerb">
<ulb>
 <lib><a href="#"><span>link</span></a></lib>

</ulb>
 <video src="testmovie.mp4" autoplay controls>Your browser can’t play this video.</video>
</div>
</body>
</html>

coothead · October 26, 2016, 12:23am

Hi there weldenr1,

sorry, but you cannot create your own HTML elements - (ulb, lib).

[quote] And I also can’t manage to get rid of the blank space
underneath the background picture[/quote]

That blank space is where you put your actual content.

Of course, I am assuming that you will at some stage
have some actual content.

Here is your code, with the errors removed…

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<!--<link rel="stylesheet" href="screen.css" media="screen">-->
<style media="screen">
body {
    margin: 0;
 }
#video-container {
    position: relative;
    padding-top: 77%;
    background-image: url(http://www.milanoperformance.com/uploads/1/0/2/1/10212014/9278866_orig.jpg);
    background-size: 100% auto;
 }
#video-container ul {
    position: absolute;
    top: 66%;
    left: 30%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 50%;
    padding: 0 5%;
    margin: 0;
    list-style: none;
    text-align: center;
 }
#video-container li:first-of-type {
    width: 30%;
 } 
#video-container li:last-of-type  {
    width: 50%;
 }
#video-container li a {
    position: relative;
    display: block;
    width: 100%;
    padding-top: 100%;
    border-radius: 50%;
    background-color: rgba(0,0,0,0.6);
    background-image: radial-gradient(rgba(206,206,206,0.2) 0, 
                                      rgba(153,153,153,0.4) 25%, 
                                      rgba(102,102,102,0.6), 
                                      rgba(51,51,51,0.8) 75%, 
                                      rgba(0,0,0,1) 100%);
 }
#video-container  a span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%); 
    color: #fff;
 }
#video-container video {
    position: absolute;
    top: 0%;
    left: 100%;
    width: 40%;
    transform: translate(-100%,0);
 }
@media screen and (max-width: 40em) {
#video-container video {
    width: 60%;
  }

@media screen and (max-width: 30em) {
#video-container video {
    width: 80%;
  }
 }
@media screen and (max-width: 22.5em) {
#video-container video {
    width: 100%;
  }
 }
</style>
</head>
<body> 
<div id="video-container">
<ul>
 <li><a href="#"><span>link</span></a></li>
 <li><a href="#"><span>link</span></a></li>
</ul>
 <video src="testmovie.mp4" autoplay controls>Your browser can’t play this video.</video>
</div>
</body>
</html>

coothead

weldenr1 · October 26, 2016, 9:34am

Hi coothead,

no there won’t be any content underneath the picture, its only the startpage with links to the content pages. So no blank needed.

The code is not exactly what I need to do. I need to change the position of the link boxes independently, e.g. putting one circle in the upper left corner and the other one in the middle of the background picture. Is that possible?

coothead · October 26, 2016, 10:00am

Hi there weldenr1,

it is not possible to have the image fill the available
space and also be responsive.

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
body {
    background-image: url(http://www.milanoperformance.com/uploads/1/0/2/1/10212014/9278866_orig.jpg);
    background-size: 100% 100%;
    background-attachment: fixed;
 }
</style>

</head>
<body> 

</body>
</html>

coothead

weldenr1 · October 26, 2016, 10:15am

Thats fine, the important thing is the individual positioning of the link boxes as mentioned.

Topic		Replies	Views
Positioning video in responsive design HTML & CSS	3	2394	November 15, 2022
Responsive Video HTML & CSS	2	916	December 19, 2015
Responsive HTML5 embed HTML & CSS	2	914	November 24, 2015
How to make video responsive? HTML & CSS	13	11293	November 9, 2015
How to create a Video like play on the entire background of a Web site HTML & CSS	10	2237	March 1, 2016

Put an video in front of a background image and make it both responsive

Related topics