1

I would like to display an image before viewing a youtube/vimeo video on my website. Is there a way to do this with jQuery or javascript?

I want to overlay this with my own image and when clicked, display the video and autoplay it, all without reloading the page.

The image and video data are coming from a database so the video data is variable. I already found a similar Question/Anwser on here: Overlay youtube embedded video with image, hide image when clicked and autoplay

But my video's are variable. Is there any other way to change the autoplay value?

Thank you for your help

Regards Jeroen

Community
  • 1
  • 1
Jeroen
  • 1,168
  • 1
  • 12
  • 24

1 Answers1

1

For overlay image you can simply use poster attribute and give path to your image

<video id="myvid" autoplay controls poster="/overlay.jpg">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
</video>

For changing video dynamically 

var video = document.getElementById('myvid ');
var sources = video.getElementsByTagName('source');
sources[0].src = "http://example.com/new_url.mp4";
sources[1].src = "http://example.com/new_url.ogg";
video.load(); //reloads video without reloading page
video.play();
Vinay
  • 7,442
  • 6
  • 25
  • 48