How to display video in html using jquery?

Question

I am getting video url from Json data as http://www.youtube.com/watch?v=UVKsd8z6scw but how can I display this video url in iframe using jquery? it is not showing anything. if I open this youtube page and embed it then i get link as //www.youtube.com/embed/UVKsd8z6scw . How to solve this problem?

    //jquery
$(document).ready(function(){
    $.getJSON("http://xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",function(data){
        alert(JSON.stringify(data));

        var content='';

        $.each(data,function(index,item){
            content +='<div class="userdata">';

            content +='<div class="userurl">'+item.keywords+'</div>';
            content +='<iframe class="usevideourl" src="'+item.videourl+'"></iframe>';
            content +='<img src="'+item.thumb+'" class="userimage"></img>';
            content +='</div>';
        });
        $('#dictionary').append(content);
    });   
});

Yeah, how does the html you're putting into content actually get added to the DOM? — Dave
– Dave, Commented Apr 30, 2014 at 15:01
Solve what problem? You've got the embed URL from YouTube. Use that. — Quentin
– Quentin, Commented Apr 30, 2014 at 15:11

MJarro · Accepted Answer · 2014-04-30 15:41:35Z

1

To solve this you have to indeed translate your Youtube URL.
From what I understand your JSON youtube adress is "http://www.youtube.com/watch?v=UVKsd8z6scw".
So you have to convert it to: "//www.youtube.com/embed/UVKsd8z6scw"

Here is a simple JS function:

 function transformUrl(url)
  {
       var i         = url.indexOf("=");
       var videoID   = url.substr(i+1,url.length);

      return ("//www.youtube.com/embed/"+videoID);
  }

so replace this:

content +='<iframe class="usevideourl" src="'+item.videourl+'"></iframe>';

by this:

content +='<iframe class="usevideourl" src="'+transformUrl(item.videourl)+'"></iframe>';

Please find below a JS fiddle using your example
LIVE DEMO HERE : JSFIDDLE http://jsfiddle.net/mjarro/5KjEW/

answered Apr 30, 2014 at 15:41

MJarro

2832 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Damon · Accepted Answer · 2014-04-30 15:08:33Z

-1

You need to append your js markup to the DOM in some way.

For example:

HTML:

<div class="video"></div>

JavaScript:

var data = {
'keywords': 'keywords',
    'videourl': 'www.youtube.com',
    'thumb': 'mythumb.jpg'
}
var content = '';

$.each(data, function (index, item) {
    content += '<div class="userurl">' + item.keywords + '</div>';
    content += '<iframe class="usevideourl" src="' + item.videourl + '"></iframe>';
    content += '<img src="' + item.thumb + '" class="userimage"></img>';
    content += '</div>';
});

$('.video').append(content);

Or, you could dynamically create the container then append all within the loop.

answered Apr 30, 2014 at 15:08

Damon

4,54415 gold badges65 silver badges125 bronze badges

Collectives™ on Stack Overflow

How to display video in html using jquery?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related