Question

我对JavaScript很陌生，所以我不确定如何执行以下操作。

基本上我想要的是以下几行：

<a onclick="JavascriptFunction(0000000)"><img src="image1.png"></a>

您看到的0000000需要是YouTube视频链接末尾的特殊代码，因此每次使用时都需要不同，例如：

<a onclick="JavascriptFunction(0000000)"><img src="image1.png"></a>
<a onclick="JavascriptFunction(0000001)"><img src="image2.png"></a>
<a onclick="JavascriptFunction(0000002)"><img src="image3.png"></a>

我希望JavaScript函数能够制作一个与YouTube视频宽度和高度相同的弹出窗口，并在该窗口中编辑HTML以获得相应的视频。

<iframe width="560" height="315" src="https://www.youtube.com/embed/0000000"></iframe>

我所追求的是一个包含我们为公司所做的所有视频评论的页面，我们点击产品的缩略图，popWin()会找到他们正在寻找的视频。我知道我可以使用正确的视频制作几页并使用onclick="popWin()"打开正确的视频，但我们有很多视频要放在这个页面上，所以有没有办法让一个页面和更改iframe中的代码是正确的视频吗？

由于这是针对一家公司的，所以我只能访问HTML页面，而不是其他任何内容，只要我可以在head部分放置一个很好的函数。

Answer 1

请参阅this JSFiddle

HTML

<a href="javascript:setVideo('yzpUKET1Ki0')">Video 1</a><br/>
<a href="javascript:setVideo('h8zIfkMp08U')">Video 2</a><br/>
<a href="javascript:setVideo('yG29lnYRuVk')">Video 3</a><br/>
<iframe id="youtube" width="560" height="315" src="https://www.youtube.com/embed/0000000"></iframe>

的JavaScript

function setVideo(video) {
    document.getElementById("youtube").src = "https://www.youtube.com/embed/" + video;
}

所以..给你的iframe id，并更改其src属性。

Answer 2

包括这些参考。你可以从bootstarap模态弹出窗口中获取弹出窗口

jquery reference
bootstrap js reference
bootstrap css reference

参考：http://getbootstrap.com/javascript/#modals

$(document).ready(function(){
  $("#myModal").on("hidden.bs.modal",function(){
    $("#iframeYoutube").attr("src","#");
  })
  
})

function changeVideo(vId){
  var iframe=document.getElementById("iframeYoutube");
  iframe.src="https://www.youtube.com/embed/"+vId;

  $("#myModal").modal("show");
}

<script   src="https://code.jquery.com/jquery-1.12.3.min.js"   integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ="   crossorigin="anonymous"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<a onclick="changeVideo('e80BbX05D7Y')">video-1</a>
<a onclick="changeVideo('ReRcHdeUG9Y')">video-2</a>



<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
      
        <iframe id="iframeYoutube" width="560" height="315"  src="https://www.youtube.com/embed/e80BbX05D7Y" frameborder="0" allowfullscreen></iframe> 
        
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

我已在codepen checkout中返回此解决方案：http://codepen.io/rajashekar2012/pen/dMrodq

编辑弹出窗口的HTML的Onclick命令

2 个答案: