Giovanni Boerstra Giovanni Boerstra - 3 months ago 23
CSS Question

Youtube Iframe in Div with background stuck on image responsive




Heey there,

I am trying to figure out how I can position the youtube Iframe in the right part on the background so it looks like youtube is being played from a laptop.
And then have it scale down accordingly with the background-image on different resolutions.

The website runs on width 100% the html code is

<div class=youtube>
<div class=youtubesmaller>
<iframe width="100%" src="https://www.youtube.com/embed/videoseries? list=PLJdPTgbeDGN08yHg1Y46vzwDhj5Nxb-y_"
frameborder="0" allowfullscreen></iframe>
</div>
</div>


And the css from the moment I noticed it wasn't scaling with the background is.

/*music page stuf*/

.youtube {
background-image: url(http://breakline.nl/wp-content/uploads/2016/08/macbookframe.png?id=353) !important;
background-size: auto;
background-repeat: no-repeat;
background-position: right;
height: 600px;
}
.youtubesmaller {
width: 51.2%;
margin-left: 37.4%;
}
/*end music page stuff*/


In the beginning I tried to give the Iframe a background but then read that wasn't possible.

website page

Answer

I won't provide you full solution for this but i hope i could help you anyway.

Change code like this:

.youtubesmaller {
margin-top: 63px;
width: 713px;
height: 446px;
margin-left: 161px;
}

.youtube {
background-image: url(http://breakline.nl/wp-content/uploads/2016/08/macbookframe.png?id=353) !important;
background-size: auto;
background-repeat: no-repeat;
background-position: right;
height: 600px;
width: 1034px;
float: right;
}

In youtube iframe change height to 100% (style="height: 100%;").

If you want to scale it - look on CSS for screen resolution - CLICK HERE

Let me know in comment if i helped you :)