iframe 视频自定义缩略图/海报

Question

这里是 stackoverflow 的首次用户。 我在 Dreamweaver 中使用 html 和 css 创建一个网站。

我正在从电视档案中获取视频，并使用 iframe 将其嵌入到我的网站上。 想要自定义缩略图。无论如何要这样做吗？ 如果可以循环播放视频缩略图就更好了！ （也许使用移动的 gif？）

这是我当前使用的 HTML 和 CSS 代码。该容器旨在帮助网站适应手机和不同的屏幕。我不是一个程序员，所以我的工作方式可能不太理想，但它很实用。

非常欢迎任何建议。我尝试了从其他网站制作自定义缩略图的不同方法，但还没有感到高兴。

提前致谢。

这是页面 https://futurevisionfestival.com/

HTML

<td width="100%"><div class="container">
      <iframe class="responsive-iframe" 
     width="100%" height="100" src="https://www.salto.nl/embed/future-vision-amsterdam/3nhym5GjLaKGciEcQmw0qU" scrolling="no" overflow="hidden" allowfullscreen allowtransparency="true" frameborder="0"> </iframe>
    </div>

CSS

.container {
    overflow: hidden;
    border: 0;
    position: relative;
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 45%; / 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) /
    scrolling: no;
    background-color: none;

}

/ Then style the iframe to fit in the container div with full height and width /
.responsive-iframe {
border: 0;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 86%;
  margin-left: auto;
  margin-right: auto;
  scrolling: no;
  
}

我尝试覆盖缩略图，但单击播放视频时无法使其消失。

Answer 1

这里有一个解决方案：

• 容器中的缩略图
• iframe 具有“可见性：隐藏”，以便缩略图可见
• 容器上的单击事件，用于切换 iframe 的可见性。

但是，该解决方案缺乏视频自动启动功能。单击缩略图时，会显示 iframe，但不会自动启动。 也许您在 https://www.salto.nl/embed/future-vision-amsterdam 上有一个 api 来自动启动视频。

function changeVisibility() {
  var iframes = document.getElementsByClassName('iframe');
  for(i = 0; i < iframes.length; i++) {
    iframes[i].style.visibility = 'visible';
  }
}

.container {
  overflow: hidden;
  border: 0;
  position: relative;
  width: 70%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 45%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
  scrolling: no;
  background-color: none;

}

/* Then style the iframe to fit in the container div with full height and width */
.responsive-iframe {
border: 0;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 86%;
margin-left: auto;
margin-right: auto;
scrolling: no;

}

/* added visibility on the iframe */
.iframe {
  visibility: hidden
}

<td width="100%">
  <div class="container" onclick="changeVisibility()">
    <img class="thumbnail responsive-iframe" src="https://www.salto.nl/wp-content/uploads/sites/4/2023/12/Winter18-Salto-viert-de-feestdagen.jpg"> </img>
    <iframe
    class="iframe responsive-iframe" width="100%" height="100"
      src="https://www.salto.nl/embed/future-vision-amsterdam/3nhym5GjLaKGciEcQmw0qU" scrolling="no" overflow="hidden"
      allowfullscreen allowtransparency="true" frameborder="0">
    </iframe>
  </div>
</td>