HTML
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Video Loader and Desciption without cloning the video element" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div class="movies_load" vidUrl="//archive.org/download/0707_Passenger_Car_Screen_Ads_00_22_52_00/0707_Passenger_Car_Screen_Ads_00_22_52_00.mp4" info="Info about Movie One" my_title="Movie One">Play Movie One</a></div>
<div class="movies_load" vidUrl="//archive.org/download/1955Chev1955/1955Chev1955.mp4" info="Info about Movie Two" my_title="Movie Two">Play Movie Two</a></div>
<div class="video-holder">
<video autoplay class="myVideo" class="sublime" name="video" src="" width="320" height="240" controls="controls"></video>
</div>
<div class="title">Movie Title</div>
<div class="my_info">Movie Info</div>
</body>
</html>
JAVASCRIPT
$(document).ready(function(){
$(".movies_load").click(function () {
$('.myVideo').attr("src", $(this).attr("vidUrl"));
$(".my_info").html($(this).attr("info"));
$(".title").html($(this).attr("my_title"));
});
});
