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

Hi there weldenr1,

here you go…

<!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">
html,body {
    height:100%;
    margin:0;
 }
body {
    background-image: url(http://www.milanoperformance.com/uploads/1/0/2/1/10212014/9278866_orig.jpg);
    background-size: 100% 100%;
 }
ul {
    margin: 0;
    list-style: none;
 }
ul li {
    position: absolute;
    z-index: 2;
 }
ul li:first-of-type {
    top: 3em;
    left: 3em;
    width: 5em;
 } 
ul li:last-of-type  {
    top: 50%;
    left: 50%;
    width: 10em;
    transform: translate(-50%,-50%); 
 }
ul li a {
    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%);
 }
ul  a span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%); 
    color: #fff;
 }
video {
    position: absolute;
    top: 0%;
    left: 100%;
    width: 40%;
    transform: translate(-100%,0);
 }
@media screen and (max-width: 40em) {
video {
    width: 60%;
  }
@media screen and (max-width: 30em) {
video {
    width: 80%;
  }
 }
@media screen and (max-width: 22.5em) {
video {
    width: 100%;
  }
 }
</style>
</head>
<body> 
<ul>
 <li><a href="#"><span>link</span></a></li>
 <li><a href="#"><span>link</span></a></li>
</ul>
<video src="testmovie.mp4" autoplay controls></video>
</body>
</html>

coothead

Hej coothead,

the links are working perfect now, but I think we misunderstood each other. The website should still be responsive as before. I tried to combine both solution, but no success. Can you help?

Sorry, but I do not understand this statement. :unhappy:

Will you please attempt to elucidate. :wonky:

coothead

Well, now I can put the links in different positions as needed, but the background picture is not responsive anymore. If I decrease the browser size then the picture shrinks.

Generally speaking, we would think of that as “responsive”.

What do you mean when you describe it as “not responsive anymore”? What would it have to do be “responsive” to you at those wider widths? Please feel free to post annotated screenshots if that will help us understand.

Hi there weldenr1,

in post #19 I stated…

[quote]it is not possible to have the image fill the available
space and also be responsive. :scream:[/quote]

…and you replied in post #20

[quote]Thats fine, the important thing is the individual
positioning of the link boxes as mentioned.[/quote]

Unfortunately, “You can’t have your cake and eat it”. :wonky:

coothead

Open your web page in your browser. In your browser, select “View Source…”; then select “Save As…” and save the source as a file. Copy and Paste the entire contents of that file into your next post as you would any other code. We need to see what you are working with. You can zip the file and attach the zipped file instead, if you prefer.

To me, how a design changes does usually require some compromises.

For example, if there is a left navigation sidebar and right content with an image to the left in that and a paragraph of text to the right of that image, at smaller widths that text can move to below the image. At smaller widths still, the sidebar can go to a slide-in, etc.

That is, various page elements can be moved or removed to allow an image to keep the same amount of screen space - up to a point.

Unless the image is narrow to begin with eventually it has to get smaller or get display scroll / hidden.

What I see using Vivaldi for coothead’s # 21 post is that the height is maintained so that the bicyclist image gets distorted.

What I think might be needed is to use artistic discretion to crop the original image into smaller images at “too much distortion” points and swap in the media queries.

I guess for portrait ↔ landscape types it might mean an extra image download, but I doubt if many non-devs are in the habit of changing view-port widths all that often.

EDIT

IMHO adding this takes care of the “squish” even though the “stretch” issue remains.
And it is somewhat fragile in that it uses the images width as a “magic number” and may not work as well for images with different composition.

@media screen and (max-width: 900px) {
body {
    background-size: cover;
  }
 }`

1 Like

Hi coothead,

I meant that a blank space is fine,
so I what I basically need is a combination of your code in post 15 and in post 21.
The background image must be responsive in relation to the video + the link boxes must be created in a way that I can move them separately up and down, left and right and change sizes and shapes individually.
Whether there is blank space or not, is not important.

Hi there weldenr1,

so basically what we have here is seems to be a
communication rather than a coding problem. :rolleyes:

Well, that is not uncommon here, judging by the
length of so many of the threads. :wonky:

Hoping that we are now singing from the same hymn
sheet “take a butcher’s” at this…

<!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 {
    margin: 0;
    list-style: none;
 }
#video-container li {
    position: absolute;
    z-index: 2;
 }
#video-container li:nth-child(1) {
    top: 1em;
    left: 1em;
    width: 4em;
 } 
#video-container li:nth-child(2) {
    top: 50%;
    left: 50%;
    width: 7em;
    transform: translate(-50%,-50%); 
 }
#video-container li:nth-child(3) {
    bottom: 1em;
    right: 1em;
    width: 4em;
 }
#video-container li a {
    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%;
  }
#video-container li {
    width: 20%;
 } 
 }
@media screen and (max-width: 30em) {
#video-container video {
    width: 80%;
  }weldenr1
 }
@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>
</ul>
 <video src="testmovie.mp4" autoplay controls></video>
</div>
</body>

coothead

1 Like

You are absolutely right! I tried to be as clear as possible, but I think when it comes to design/coding, communication gaps occur easily.

Thanks so much for your patience and the great code. On the basis of your code
I changed it to percentage positioning of the links and also percentage width and got what I needed :slight_smile:

The only thing I can’t get done is to adjust border-radius not through #video-container li a {, but adjusting it separately in each #video-container li:nth-child. In my code you can see that I tried to get one with 0%, 50% and the last one with 80% border-radius.

<!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 {
    margin: 0;
    list-style: none;
 }
#video-container li {
    position: absolute;
    z-index: 2;
 }
#video-container li:nth-child(1) {
    top: 78%;
    left: 35.5%;
    width: 5%;
    border-radius: 0%;
    transform: translate(-50%,-50%);
} 
#video-container li:nth-child(2) {
    top: 30%;
    left: 30.5%;
    width: 5%;
    border-radius: 50%;
    transform: translate(-50%,-50%); 
 }
#video-container li:nth-child(3) {
    top: 60%;
    left: 50%;
    width: 5%;
    border-radius: 80%;
    transform: translate(-50%,-50%); 
 }
#video-container li a {
    display: block;
    width: 100%;
    padding-top: 100%;
    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%;
  }
#video-container li {
    width: 20%;
 } 
 }
@media screen and (max-width: 30em) {
#video-container video {
    width: 80%;
  }weldenr1
 }
@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>
</ul>
 <video src="testmovie.mp4" autoplay controls></video>
</div>
</body>

Are you aware that using percentage widths will result
in the text overflowing it’s container as the page width
is decreased?

If you apply the"border-radius" to the “li element”,
then you should either add “overflow:hidden” to the
“li element” or remove this…

    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%);

…from the “a element” and add it the “li element”.

Also note that “border-radius: 80%;” will be rendered as
“border-radius: 50%;”.

Also note that you only need to use “transform: translate”
if you want the center of the element to be positioned at
the “top and left” settings.

If that is what you actually require then the values should match, for example…

    top: 78%;
    left: 35.5%;
    width: 5%;
    border-radius: 0%;
    transform: translate(-35.5%,-78%);

coothead

1 Like

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