Hello everyone! I'm a first-time user on stackoverflow seeking some help. Currently, I am using Dreamweaver to work with HTML and CSS in order to build a website.
My task involves sourcing a video from a television archive and embedding it onto my site using an iframe element. I would like to know if there is a way to customize the thumbnail image, and even better, create a looping video thumbnail (perhaps utilizing a moving gif?).
Below, you can find the current HTML and CSS code I have implemented. The container is designed to ensure that the site is responsive across different devices, although I admit that my programming skills are not very advanced and there might be cleaner ways to achieve this functionality.
I would greatly appreciate any suggestions or tips. I have attempted various methods to customize the thumbnail based on advice from other sites, but so far without success.
Thank you in advance for any help provided.
You can visit the page here:
HTML Code:
<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 Code:
.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;
}
/* Style the iframe to fit within 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've attempted overlaying the thumbnail, however, couldn't figure out how to make it disappear when clicked to play the video.