Insert external video or HTML or JS into a div

Asked

Viewed 3,924 times

11

On 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 this 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--------------

That is possible?

Or do the same thing with an external HTML page.

Example: 

/questions/28064/inserir-vídeo-externo-em-uma-div

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

javascript html div

3 answers

4


Can this help you? If in doubt please 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>

Javascript Puro

  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);
 });

  • Valeu helped me a lot, I’m trying to improve a script in this question http://answall.com/questions/28721/editar-script-para-function-em-div poderia da uma olghada

  • Tip: Whenever the answer to your question, whether it’s what you wanted, give it an upVote or Avorite, so that other users keep in mind that the question is already answered as it should. Welcome to the Stackoverflow

  • As soon as I can, I’ll help you with your question.

3

You can do jQuery using the date attribute.

For example, your html would look like this:

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

And your jQuery would be:

$(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 video id goes in the "data-id" attribute referenced in HTML and jQuery does the rest of the work to read and put the video frame inside the div itself.

  • It helped me a lot, could you help me with this other question, http://answall.com/questions/28721/editar-script-para-function-em-div

3

For all videos on the page to work correctly, it should be 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>

  • Could you help me with this other question http://answall.com/questions/28721/editar-script-para-funciona-em-div

Browser other questions tagged javascript html div

You are not signed in. Login or sign up in order to post.