Insert video or HTML or external JS into a div

Question

Insert video or HTML or external JS into a div

Navigation

#1 by (4 votes)
#2 by (3 votes)
#3 by (3 votes)

11

In the site I'm developing, I'd like to call an external video within a div , just using the video ID.

Example: https://www.youtube.com/watch?v=UJAwNkhbYWM

In case the video ID is this: UJAwNkhbYWM . Whenever you create a post on this website and have a youtube ID inside the div the video would appear.

Example:

post

div class="UJAwNkhbYWM">/div

--------video--------------

Is this possible?

Or do the same thing with an external HTML page.

Example:

http://pt.stackoverflow.com/questions/28064/inserir-vídeo-externo-em-uma-div

Only by using a part of the link: questions/28064/inserir-vídeo-externo-em-uma-div within the div would show the page.

javascript html div

asked by anonymous 06.08.2014 / 23:23

3 answers

3

You can do it in jQuery using the date attribute.

For example, your html would look like this:

<div class="video" data-id="UJAwNkhbYWM"></div>

And your jQuery would look like:

$(document).ready(function(){
    var id = $('.video').data('id');
    $('.video').html('<iframe width="560" height="315" src="http://www.youtube.com/embed/'+id+'" frameborder="0" allowfullscreen></iframe>');
});

The id of the video goes in the "data-id" attribute referenced in HTML and jQuery does the rest of the work to read and put the frame of the video within the div itself.

07.08.2014 / 00:11

3

For all videos on the page to work correctly, it should look like this:

jquery:

$('[data-id]').each(function(){
    $(this).html( '<iframe width="560" height="315" src="http://www.youtube.com/embed/'+$(this).data('id')+'" frameborder="0" allowfullscreen></iframe>');
});

html:

<div data-id="UJAwNkhbYWM"></div>

<div data-id="XxVg_s8xAms"></div>

07.08.2014 / 00:28

Restriction of words in comments Save and send selected item id in dropdowlinst

score 4 · Accepted Answer

Can this help you? If in doubt let me know. To see the result click here .

HTML

<div id="video" class="UJAwNkhbYWM">
     <iframe width="854" height="510" id="caixa" frameborder="0" allowfullscreen></iframe>     
</div>

Pure JavaScript

  var video = document.getElementById("video");
  var video = video.className;
  var iFrame = document.getElementById("caixa");
  iFrame.src = "https://www.youtube.com/embed/" + video;

JQuery

 $(document).ready(function(){
    var video = $("#video").attr('class');
    $('#caixa').attr('src', "https://www.youtube.com/embed/" + video);
 });