iframe video custom thumbnail/poster

Question

First time user of stackoverflow here. Am using html and css in Dreamweaver to create a website.

I am sourcing a video from a television archive and embedding it onto my website using iframe. Would like to customize the thumbnail. Anyway to do that? If a looping video thumbnail is possible even better! (maybe using a moving gif?)

Here is the current HTML and CSS code I am using. The container is to help adapt the site to phones and different screens. Am not much of a programmer, so the way I am working is probably not ideal, but it is functional.

Any suggestions very welcome. I tried different ways of doing a custom thumbnail from other sites, but no joy yet.

Thanks in advance.

Here is the page 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;
  
}

I tried overlaying the thumbnail, but couldn't get it to disappear when clicked to play the video.

Answer 1

Here is a solution with:

• a thumbnail image in the container
• the iframe having 'visibility: hidden', so that the thumbnail is visible
• a click event on the container, to switch the visibility of the iframe.

However, this solution lacks an auto-start of the video. When clicking on the thumbnail, the iframe is displayed, but does not start automatically. Maybe you have an api on https://www.salto.nl/embed/future-vision-amsterdam to autostart the video.

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>