0

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

Alex Cushing
  • 268
  • 1
  • 17
Giovanni Boerstra
  • 49
  • 6

2 Answers2

2

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 :)

Community
  • 1
  • 1
Oskar J
  • 36
  • 1
  • Hello thanks alot for the response! Following your instructions I got the player in the screen but it wasn't high enough. iframe displays width: 100% and height:100px in browser. Iframe is not as big as the inner wrap. The only number that is changing whilst resizing the window is the height in this code. frameborder="0" allowfullscreen="" style="height: 401.062px;"> I see that this is element style and when I edit it to 450 the image is correct. after resizing its back to the old. – Giovanni Boerstra Aug 24 '16 at 19:21
  • Did you add [ style="height: 100%;" ] to iframe? Like this: – Oskar J Aug 24 '16 at 19:28
  • Yes I have exactly that – Giovanni Boerstra Aug 24 '16 at 19:36
  • I tried the solution below edited for this code. I added .youtubesmaller iframe { width: 100% !Important; height: 100% !Important; } And it worked! What solution is better for future responsiveness? – Giovanni Boerstra Aug 24 '16 at 19:45
  • Your solution is good. Now you need to add responsiveness via CSS for screen resolution. – Oskar J Aug 24 '16 at 19:55
  • Will definitely do, your help was greatly appreciated! – Giovanni Boerstra Aug 24 '16 at 20:03
1

Here is how I got it to work as you requested.

First I added the set height and width to your iframe:

<iframe width="714px" height="450px" src="https://www.youtube.com/embed/videoseries?list=PLJdPTgbeDGN08yHg1Y46vzwDhj5Nxb-y_" frameborder="0" allowfullscreen="" style=""></iframe>

Then set the width on your wrapper in pixels (this result will not be responsive, but I noticed you don't have a responsive page). Also I added float right and position relative:

.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: 1039px;
    float: right;
    position: relative;***
}

Then I positioned the inner div absolutely in the appropriate spot:

.youtubesmaller {
    position: absolute;
    top: 63px;
    left: 165px;
}

I did this right on your site in the browser inspector and here is the screenshot of the result: http://screencast.com/t/hgJkgbQktF

Vcasso
  • 1,328
  • 1
  • 8
  • 14
  • Hi there thanks for your response! I tried this out and got the player in the top left corner of the screen filling about 1/4th of the screen. I went to check why it wasn't bigger and I noticed that the Iframe's code properties were not the same as in browser. Browser still displays width: 100% Width can't be adjusted, it resets to 100% on the page eventhough my code says something else. Also I changed it in the browser but it didn't do anything. I tried the other answer And discovered that changing the iframes width and height doesn't do anyhting visual on my screen. – Giovanni Boerstra Aug 24 '16 at 19:19
  • You can try forcing the width and height of the iframe .youtubesmaller iframe { width: 714px !Important; height: 450px !Important; } – Vcasso Aug 24 '16 at 19:31
  • That worked! And it helped me fixing the code from the other answer aswell. I don't know which code to use. Would the other answer be better for future responsiveness? – Giovanni Boerstra Aug 24 '16 at 19:46