Skip to content

Instantly share code, notes, and snippets.

@gerbenvandijk
Last active July 18, 2019 06:01
Show Gist options
  • Save gerbenvandijk/d47455085293b5640bec to your computer and use it in GitHub Desktop.
Save gerbenvandijk/d47455085293b5640bec to your computer and use it in GitHub Desktop.
Dynamically loading a HTML5 video element with JavaScript
function loadVid(){
var videourl = 'urltoyourvideo here'; // set the url to your video file here
var videocontainer = '#videocontainer'; // set the ID of the container that you want to insert the video in
var parameter = new Date().getMilliseconds(); // generate variable based on current date/time
var video = '<video width="1102" height="720" id="intro-video" autoplay loop src="' + videourl + '?t=' + parameter + '"></video>'; // setup the video element
$(videocontainer).append(video); // insert the video element into its container
videl = $(document).find('#intro-video')[0]; // find the newly inserterd video
videl.load(); // load the video (it will autoplay because we've set it as a parameter of the video)
}
@sylvio-ruiz
Copy link

sylvio-ruiz commented Feb 8, 2017

I think that you would to change the title of your code to "Dynamically loading a HTML5 video element with JQuery or similar library".
This is not pure javascript like this:

var node = document.getElementById(videocontainer);
node.appendChild(video);
var videl = document.getElementById('#intro-video');
videl.load();

No dependencies using your variables.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment