CODEWITHSUNDEEP
javascriptjqueryiframe
Saint Robson
Saint Robson

Reputation: 5525

Adding DIV Element Into IFRAME Using JavaScript

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.

Upvotes: 0

Views: 972

Answers (2)

Akshay Shrivastav
Akshay Shrivastav

Reputation: 1227

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

Upvotes: 0

Rajshekar Reddy
Rajshekar Reddy

Reputation: 18987

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

Upvotes: 3

Related Questions