I would like to implement a basic code which runs videojs(http://videojs.com/getting-started/) upon a click. Implementing without a function works. But when I make it within a function (create DOM elements and attach them to the body), it does not. Thanks in advance
<!DOCTYPE html>
<html>
<head>
<link href="https://vjs.zencdn.net/7.0.3/video-js.css" rel="stylesheet">
<script src="https://vjs.zencdn.net/7.0.3/video.js"></script>
<!-- If you'd like to support IE8 (for Video.js versions prior to v7)
<script src="http://vjs.zencdn.net/ie8/ie8-version/videojs-ie8.min.js"></script>-->
</head>
<body>
<div id = 'hello'></div>
<video id="my-video" class="video-js" controls preload="auto" width="640" height="264"
poster="" data-setup="{}">
<source src="Selena_Gomez_Same_Old_Love.mp4" type='video/mp4'>
<source src="" type='video/webm'>
</video>
<a href="javascript:playVideo()">Click me for playing the video</a>
<script>
function playVideo(){
var video_element = document.createElement("VIDEO");
video_element.id= 'my-video';
video_element.class = 'video-js';
video_element.controls = 'auto';
video_element.setAttribute('preload','auto');
video_element.setAttribute('width','640');
video_element.setAttribute('height','264');
//source
var source_element = document.createElement("SOURCE");
source_element.src='Selena_Gomez_Same_Old_Love.mp4';
source_element.type= 'video/mp4';
document.body.appendChild(video_element);
document.body.appendChild(source_element);
}
</script>
</body>
</html>
