Question

我想知道如何在加载vimeo视频时显示图像（不是来自视频的thumnail）？

我目前正在使用vimeo嵌入全屏代码，它可以很好地用作背景视频标题。但是，我觉得加载需要一点时间，并希望在加载时首先显示图像。任何帮助，将不胜感激。

我目前的代码如下：

<div class="hero-image ">
<div class="flex-video widescreen vimeo">
 <span id="insertVimeoHeader" class=""> </span>
  <div class="hero-text" >
<BR><BR><BR><BR><BR>
<a href="#recent-videos" style="" class="button MEDIUM smooth">VIEW OUR 
WORK</a>
  </div>
</div>
</div>

我用jquery加载vimeo iframe：

$('#insertVimeoHeader').html('<iframe 
src="https://player.vimeo.com/video/198265583?background=1" width="100%" 
height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen 
allowfullscreen ></iframe>');

Answer 1

我在要嵌入的容器上使用背景图像。这样一来，您就可以看到图像，直到播放器加载完毕。确保您嵌入的视频填充了此容器。

请注意，我的示例适用于全屏背景视频

HTML

<div class="embed-container">
  <iframe src="https://player.vimeo.com/video/1234?autoplay=1&loop=1&autopause=0&background=1" 
      frameborder="0"
      webkitallowfullscreen 
      mozallowfullscreen 
      allowfullscreen>
  </iframe>
</div>

CSS

.embed-container {
  position: relative;
  padding-bottom: 56.25%;
  overflow: hidden;
  background-image: url("https://example.com/image.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

如何在加载vimeo视频时显示图像？

1 个答案: