How to dynamically create multiple youtube videos embedded to a page?

I was wondering if it is possible to create dynamically multiple youtube embeds on a page. Youtube video id's where stored in a JSON object.

I was hoping something like this can be created dynamically by the script:

I already use the Youtube Javascript API to load one hero video, I can imagine that I may can use that code as the basic, but it belongs to another part of the site then the hero video. Anyone have any suggestions?


I prepared a little JsFiddle for you:

Create a container in your HTML:

<div id="ytContainer"></div>

JavaScript with jQuery:

var yourJsonAsString = '{"videos":[{"title":"bla bla","id":"no3unQcv_vg"},{"title":"blub","id":"3IHrNcJdP8s"},{"title":"abc","id":"-6v-rwoRv_4"}]}';

var ytVideos = JSON.parse(yourJsonAsString);

for (var i in ytVideos.videos) {
  var ytVideo = $("<iframe/>");
    width: 560,
    height: 315,
    src: '' + ytVideos.videos[i].id,
    frameborder: 0

In this example I expected your unserialized object structure is looking like this:

         "title":"bla bla",

But you can adapt to your needs :)

Imagine that your JSON string that contains the video urls. Here is some code that will work with jQuery. By changing the json_string variable, it will change which videos get loaded to the screen.

  <div id="content_div"></div>

<script type="text/javascript">

jQuery(function () {

  var json_string = '{ "vid1" : "www.vid1.url", "vid2" : "www.vid2.url"}';

  //make the string into an object
  var json_object = JSON.parse(json_string);

  //loop through the json_object and add the new video each time through
  for (i in json_object) {
    jQuery("#content_div").append('<p><iframe width="420" height="315" src="' + json_object[i] + '"></iframe></p>');



JSfiddle here showing the code working, but using a <p> tag instead of the iframe.

Need Your Help

Regular expression to replace string in javascripts

javascript xml regex

hi i have one XML file i just want to replace some path in XML.

Flash Builder 4: mx:Button baseColor doesnt exist

flash mxml builder

Just wanted to add this here in case you are migrating your project from Flash Builder 4 Beta to Flash Builder 4 release.