CODEWITHSUNDEEP
javascriptjqueryhtml
Jeft Lebowski
Jeft Lebowski

Reputation: 71

JQuery youtube link to embedded doesnt work

Please check: http://jsfiddle.net/T6Nja/

My JQuery:

$('.training').html(function(i,v){
    var id = v.split('watch?v=')[1]; // get the id so you can add to iframe
    return '<iframe width="150" height="150" src="http://www.youtube.com/embed/' + id + '" frameborder="0" allowfullscreen></iframe>';
});

}); My HTML:

<div class="training">http://www.youtube.com/watch?v=DABphlXEyW8e</div><div class="training">http://youtu.be/DABphlXEyW8f</div>

Im clueless...

Upvotes: 0

Views: 493

Answers (2)

james
james

Reputation: 1041

The first one does work (In the sense it gets the id from the url in the div), as it contains :

watch?v=

Which is needed in the extraction of the id on this line:

var id = v.split('watch?v=')[1]; // get the id so you can add to iframe

But it throws this error in jsfiddle:

Unsafe JavaScript attempt to access frame with URL
http://jsfiddle.net/T6Nja/ from frame with URL 
http://www.youtube.com/embed/DABphlXEyW8e.
Domains, protocols and ports must match.

The second "training" div does not work because it does not contain the: 

watch?v=

Needed to extract the Id

You need to update your html to be like this: 

<div class="training">http://www.youtube.com/watch?v=DABphlXEyW8e</div>

<div class="training">http://www.youtube.com/watch?v=DABphlXEyW8f</div>

Youtube embed: Unsafe JavaScript attempt to access frame

The link above will help you out with your Unsafe JavaScript attempt

Upvotes: 0

Alon Eitan
Alon Eitan

Reputation: 12025

I think the problem is the video id in the first div look at this example where i've changed the video id from DABphlXEyW8e to DABphlXEyW8

Upvotes: 2

Related Questions