Replace JPG with MP4

[Everton]

I have two thumbnails on a page that, when clicked, open in a pop-up lightbox to see larger versions of the same image. So, for example, thumb-1.jpg opens violin.jpg, while thumb-2.jpg opens jump.jpg. This is the code:

CSS:

.link {
width: 50%;
margin-top:50px;
margin-left: auto;
margin-right: auto;
}

HTML:

Instead of opening larger images when a thumbnail is clicked, I would like to display a MP4 file with controls.

Is that possible, please?

[Beverleyh]

It’s possible with JavaScript. Here’s a demo that loads a YouTube video (iframe embed code) into a modal popup but you can edit the HTML in the JS function so that it inserts your video markup instead of the iframe video embed markup. http://fofwebdesign.co.uk/template/_testing/video/youtube-popup-modal.htm

Note that the function is using the video src/address in the text link’s href attribute. You’d wrap the link around your thumbnail image instead of text.

[Author]

Posts