Dynamically Load YouTube Video Using jQuery

This Tutorials helps you to add dynamically youtube video in iframe.  To add dynamically load the YouTube Video, you’ve to change the iframe src attribute using the jQuery. Following is the demo and download the source.

Demo | Download

Code

Create a file called index.html (or your own project).

HTML

<!DOCTYPE html>
<html>
<head>
<title>Load YouTube Video using jQuery</title>
<meta charset=utf-8 />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="script.js"></script>
</head>
<body>
  <label for="videoUrl"><strong>Youtube Video ID</strong></label>
  <input type="text" id="videoUrl" name="videoUrl" value="E6KwXYmMiak">
  <div id="mydiv"><iframe id="frame" src="" width="500" height="300">
   </iframe></div>
  <button id="button">Load</button>
</body>
</html>

Now, create a file called script.js and paste the following code.

Javascript

$(function(){
  $("#button").click(function () { 
      $("#frame").attr("src", "http://www.youtube.com/embed/"+ $("input#videoUrl").val() +"?rel=0&autoplay=1");
      });
});

DemoDownload

 

Please follow and like us:



Leave a Comment

Your email address will not be published. Required fields are marked *