嵌入YouTube视频无法更新语义UI

时间:2018-07-12 15:14:25

标签: javascript html embed semantic-ui

我正在使用JavaScript制作一个随机的YouTube视频生成器。一切正常,只是该视频未在网站上更新。

我需要将embed容器的data-id设置为视频ID才能更改视频。这是我的代码:

function main(){
  let arr = ['zC21TcRQzKs','eQKTmmHmMSw','Qv3Jf2SAspQ']
  let rndNum = Math.floor((Math.random() * arr.length) + 1)
  let videoId = arr[rndNum];
  
  console.log(videoId);

  document.getElementById('videoContainer').setAttribute('data-id',videoId)

  $('.ui.embed').embed()
}

document.getElementById('generateVideo').addEventListener('click', main);
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.0/semantic.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.0/semantic.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class="ui button basic" id="generateVideo">Generate</button>

<div class="ui embed" data-source="youtube" id="videoContainer"></div>

由于某种原因,该代码在这里不起作用。检查:jsfiddle。 随机数发生器正常工作,但视频未更新。

0 个答案:

没有答案