Adding DIV Element Into IFRAME Using JavaScript

Question

Summernote textarea change YouTube URL into <iframe> using this code :

    $video = $('<iframe>')
      .attr('src', '//www.youtube.com/embed/' + youtubeId)
      .attr('width', '640').attr('height', '360');

and it turns the YouTube URL into this :

<iframe src="//www.youtube.com/embed/_qxxxxxxc" width="640" height="360" frameborder="0"></iframe>

but I want to insert bootstrap responsive class, so it will end like this :

<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="//www.youtube.com/embed/_qxxxxxxc" frameborder="0"></iframe>

I tried to modify the javascript like this :

$video = 
    $('<div>').attr('class','embed-responsive embed-responsive-16by9');
    $('<iframe>')
    .attr('class', 'embed-responsive-item')
    .attr('src', '//www.youtube.com/embed/' + youtubeId)
    .attr('width', '640').attr('height', '360');

and it end up like this as result :

<div class="embed-responsive embed-responsive-16by9" frameborder="0"></div>

how to keep the iframe and add div element? thank you.

Rajshekar Reddy · Accepted Answer · 2016-03-26 14:37:40Z

3

Try this

 $video =    
    $('<iframe>')
    .attr('class', 'embed-responsive-item')
    .attr('src', '//www.youtube.com/embed/' + youtubeId)
    .attr('width', '640').attr('height', '360');

 $div = $('<div class="embed-responsive embed-responsive-16by9"></div>').append($video);

Your Problem Was

$video = 
    $('<div>').attr('class','embed-responsive embed-responsive-16by9'); //the semicolon indicates end of line. So your $video ends here

//below line of code does nothing. It just creates a iframe with all mentioned stuff and then???? its not put into any use.
    $('<iframe>')
    .attr('class', 'embed-responsive-item')
    .attr('src', '//www.youtube.com/embed/' + youtubeId)
    .attr('width', '640').attr('height', '360');

answered Mar 26, 2016 at 14:37

Rajshekar Reddy

19.1k4 gold badges45 silver badges64 bronze badges

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

7 Comments

Saint Robson Over a year ago

your code works, bro! but it end like this :

<div class="embed-responsive embed-responsive-16by9" frameborder="0"><iframe class="embed-responsive-item" src="//www.youtube.com/embed/_xxxxxx" width="640" height="360"></iframe></div>

, the frameborder="0" now stick to div element, not iframe.

Rajshekar Reddy Over a year ago

I dont see any frameborder="0" in the syntax, I guess you have some other script appending it. Can you confirm?

Saint Robson Over a year ago

hold on... let me check... but, I guess so... it added with other scripts.

Saint Robson Over a year ago

there's code like this under your code :

if ($video) {         $video.attr('frameborder', 0);         range.create().insertNode($video[0]);         afterCommand($editable);       }

that cause frameborder stick to div

Saint Robson Over a year ago

problem solved bro... I know how to solved it. thanks for your enlightenment!

|

Akshay Shrivastav · Accepted Answer · 2020-05-31 13:34:44Z

0

As for today's date if you're using summernote v0.8.16

you may refer below code for youtube specific

$video = external_root_jQuery_commonjs2_jquery_commonjs_jquery_amd_jquery_default()('<iframe allowfulscreen allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture">').attr('frameborder', 0).attr('src', 'https://www.youtube.com/embed/' + youtubeId + (start > 0 ? '?start=' + start : ''));

$video.addClass('note-video-clip embed-responsive-item');
$video = $('<div class="embed-responsive embed-responsive-16by9"></div>').append($video);
return $video[0];

You'll find this code line somewhere around 9000 to 9100 or you may just search for $video = hope this helps

answered May 31, 2020 at 13:34

Akshay Shrivastav

1,2475 gold badges18 silver badges48 bronze badges

Collectives™ on Stack Overflow

Adding DIV Element Into IFRAME Using JavaScript

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related