Embed Youtube Video Inside Image

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 7

Solution 1:

I found two possible solutions for your problem:

1. 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)
2. 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