Placing Responsive Youtube Videos on iMac Monitor Screen With CSS

How to place a responsive youtube video right in the middle of the monitor screen with CSS – A few days ago a friend on a Facebook fan page asked how to make a macbook mockup but there was a video on the screen.

We were confused about what he meant so we just kept quiet, but again he asked about it, but this time with an explanation, that the video was placed on the monitor screen with css.

css responsive youtube videos

In the end we decided to help him make what he asked for. That is the placement of an iMac mockup in the middle of which there is a video that can be played, with the help of an iframe and a few css settings this can be made easily.

The first step: Create the HTML script file first.

Put a script to support viewport in the header so that the website can be responsive

Then create an outline of the page in the body, like this:

In the script above we create a skeleton div, then in it there is content, and inside that content is placed an iframe containing a youtube video.

Step two: Position the video with CSS

h1{
text-align: center;
}
.container{
padding: 20px;
width: 100%;
height: 100%;
max-width: 1034px;
max-height: 400px;
margins: 0 auto;
/* background: yellow;/ } .container .content { position: relative; padding-top: 20px; padding-bottom: 67.5%; /background: red;/ /height: 0;*/
}
.content iframe {
box-sizing: border-box;
background: center center no-repeat;
background-size: contain;
padding: 3.7% 8.5% 20.8%;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
The logic is, first determine the area of ​​the container.
Then set the position of the div for the content, making its position relative to the area of ​​the container so that the video can be placed in the right position, which is inside the container.

Then set the video iframe position, place the video in the top left position by giving a value of 0 to top & left in CSS, then make the width and height 100% so that the video fills the iframe that has been given an iMac computer image background whose padding has also been set so that fit and not stretched.

– Also read: Making Youtube Videos as Website Background

DEMO

You can see the demo results and download the script here, hopefully it’s useful