如何在图像上播放视频？答案

【问题标题】：How to play video on image?如何在图像上播放视频？
【发布时间】：2017-04-02 19:29:39
【问题描述】：

我有以下图片：

现在我想用响应式视图在这张图片上放置一个 vimeo 视频：

为此，我使用以下 css 和 html 代码：

html代码：

<div class="vimeo">
<article>
    <figure>
        <iframe src="https://player.vimeo.com/video/211148482?autoplay=1&title=0&byline=0&portrait=0" width="568" height="453" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>       
    </figure>        
</article>
</div>

CSS 代码：

.vimeo { 
    font: 16px/1.4 Georgia, Serif;
    width: 45%; 
    margin: 1px auto;   
    background: url(images/bg.jpg); 
    background-size: contain;
    background-repeat: no-repeat;   
    position: relative;
}

pre, article style, article script { 
    white-space: pre; 
    display: block;         
    overflow-x: auto; 

}

img { 
    max-width: 100%;
}
figure { 
    display: block; 
}
figcaption { 
    display: block; text-align: center; orphans: 2;
}

现在看起来像这样：

我想在图像灰色背景上设置它，我该怎么做？

【问题讨论】：

stackoverflow.com/questions/10881678/…
HTML : play a video inside an image的可能重复

标签： html css

【解决方案1】：

检查代码，不过需要一些微调。

$(function() {

    var $allVideos = $("iframe[src^='//player.vimeo.com'], iframe[src^='//www.youtube.com'], object, embed"),
    $fluidEl = $("figure");

	$allVideos.each(function() {

	  $(this)
	    // jQuery .data does not work on object/embed elements
	    .attr('data-aspectRatio', this.height / this.width)
	    .removeAttr('height')
	    .removeAttr('width');

	});

	$(window).resize(function() {

	  var newWidth = $fluidEl.width();
	  $allVideos.each(function() {

	    var $el = $(this);
	    $el
	        .width(newWidth)
	        .height(newWidth * $el.attr('data-aspectRatio'));

	  });

	}).resize();

});

figure {
    display: block;
    background: url(https://i.stack.imgur.com/JQiLu.jpg); 
    background-size: contain;
    background-repeat: no-repeat;  
    padding: 7%;
}

figcaption {
  position: relative;
  top: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<figure>
		<iframe src="//player.vimeo.com/video/211148482?autoplay=0&title=0&byline=0&portrait=0" width="400" height="225" frameborder="0"></iframe>
		<figcaption>Caption</figcaption>
	</figure>

感谢 https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

【讨论】：

哇，很好用，但为什么视频的左右之间有黑色背景？
嗯，这是视频本身的背景。您必须设置视频帧的初始大小，然后它将保持该比例。 IE。使初始宽度更小并增加左右填充。

【解决方案2】：

您可以避免使用 javascript，但只能使用 css。

您可以设置透明颜色并使用 png 图像格式来代替灰色。您需要 css 声明 background-color: transparent 才能看到透明颜色上方的视频。此外，您需要 css 声明 position: absolute 来重叠图像和视频。

另请参阅 sn-p。（注意可以改善png图片）

希望能帮到你。

<div style="position: absolute; width: 882px; height: 590px;">
<img style="position: absolute; background-color: transparent; width: 100%; height: 100%;" src="https://i.stack.imgur.com/GsgXg.png">
<iframe src="https://player.vimeo.com/video/211148482?autoplay=1&title=0&byline=0&portrait=0" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>

【讨论】：