Question

Summernote textarea使用以下代码将YouTube网址更改为<iframe>：

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

并将YouTube网址改为：

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

但是我想插入bootstrap响应类，所以它会像这样结束：

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

我试图像这样修改javascript：

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

结果像这样结果：

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

如何保留iframe并添加div元素？谢谢。

Answer 1

试试这个

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

您的问题

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

Answer 2

关于今天的日期，如果您使用的是summernote v0.8.16

您可以参考以下针对YouTube的代码

$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];

您会在9000到9100之间找到此代码行，或者您可能只是搜索$video =希望对您有所帮助

使用JavaScript将DIV元素添加到IFRAME中

2 个答案: