Embed Youtube video inside image

Question

I am using Bootstrap to embed a responsive-embed Yotube video inside a responsive-image of a monitor. This works fine on my desktop, but on specific resolutions (anything between 787x1000 and 995x1139) the video doesn't display correctly over the image. Is there any way to overcome this?

Here's a sample of my work on JsFiddle:

http://jsfiddle.net/t6jr6bzc/1/

Here's my code:

<div class="container-fluid" id="primapagina">
<div class="row" style="width: 100%;">
      <div class="col-md-7">
            <img src="https://googledrive.com/host/0B55_4P6vMjhITlB1VzJCZnRBUGc/monitor.png" class="img-responsive">
            <div id="video">
                <div class="embed-responsive embed-responsive-16by9">
                <iframe class="embed-responsive-item" src="http://www.youtube.com/embed/ldxJMRrQxEA"></iframe>
                </div>
            </div>

And the CSS:

#video{
width: 85%;
margin-top: -69%;
margin-left: 7.5%;
}

Please post a code sample of the relevant code that's having the issue. If you can mock it up on jsfiddle or bootply, that would be even better. Gotta provide code if you want a solution. — MattD, Nov 13 '14 at 17:14

score 0 · Answer 1 · edited May 23 '17 at 10:26

I found two possible solutions for your problem:

replace the col-md-7 class with col-xs-7, or (which set the width of your image to 0.5833 of the viewport on small screens to)
remove the img-responsive and add img {width:100%} to your CSS (which will scale up your image to larger than its original size)

Explanation: The col-md-7 will only be applied when your screen width is wider than 992 pixels,see: http://getbootstrap.com/css/#grid.

Below the 992 pixels the size of the div with the col-md-7 class will be set to 100% of it's parent according to the border-box model. (100% of the viewport in your case)

For a screen width of for instance 800px the width of your video will be 85% of 800 px (=680) whilst you background image will be not larger than its original size (505px) set by the max-width:100% of the img-responsive class

Embed Youtube video inside image

1 Answers1

Linked