在图片中嵌入Youtube视频 [英] Embed Youtube video inside image

问题描述

我使用Bootstrap将一个响应嵌入的Yotube视频嵌入显示器的响应图像中。这在我的桌面上正常工作，但在特定的分辨率（任何在787x1000和995x1139之间）视频不能正确显示在图像上。有没有办法克服这个问题？

以下是我对JsFiddle的工作范例：

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

这是我的代码：

 < div class =container-fluidid =primapagina> 
< div class =rowstyle =width：100％;> 
< div class =col-md-7> 
< img src =https://googledrive.com/host/0B55_4P6vMjhITlB1VzJCZnRBUGc/monitor.pngclass =img-responsive> 
< div id =video> 
< div class =embed-responsive embed-responsive-16by9> 
< iframe class =embed-responsive-itemsrc =http://www.youtube.com/embed/ldxJMRrQxEA>< / iframe> 
< / div> 
< / div> 
  
 
 
 
 
 
 
 
 p> 
 
 
  #video {
 width：85％; 
 margin-top：-69％; 
 margin-left：7.5％; 
} 
  
 
 
解决方案
您的问题：
 
 
将 col-md-7  $ c> col-xs-7 或（将小图片上的视口宽度设置为0.5833）
 
 
删除< c $ c> img-responsive 并将 img {width：100％} 添加到您的CSS（这将放大您的图像大于原始大小）
 
 
说明： col-md-7 在屏幕宽度大于992像素时应用，请参阅： http://getbootstrap.com/css/#grid 。
 
 
 
在<992像素下方，使用 col-md-7 类的div的大小根据边框盒模型。 （您的情况下视口的100％）
 
 
 
对于屏幕宽度为例如800像素，您的视频宽度将为800 px（= 680）的85％，而您的背景图片将不会大于由 img-responsive 的 max-width：100％设置的原始大小（505px） c $ c> class 
 
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%;
}

解决方案
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

                        
这篇关于在图片中嵌入Youtube视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！