ポップウィンドウのHTMLを編集するOnclickコマンド

Question

私はJavaScriptが新しく、次のようにはわからない。

基本的に以下の行は、私がつもりです：

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

0000000それが毎回異なることが必要であるので、あなたは、ユーチューブの動画リンクの終わりに特別なコードする必要がありますを参照してください私は例えば、それを使用する：私はJavaScript関数をしたいと思い何

<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> 

は、YouTubeの動画を同じ幅と高さで、ポップウィンドウを作成し、持っているそのウィンドウでHTMLを編集しています対応するビデオ。私は本当に私たちは私たちの会社のために行うすべての私たちのビデオレビューのページです後、私たちは製品のサムネイルをクリックしてpopWin()は、彼らが探していた映像を思い付くよ何

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

。私は正しいビデオでいくつかのページを作って、正しいものを開くためにonclick="popWin()"を使うことができると理解していますが、私たちはこのページを置くためのビデオがたくさんあるので、1ページを持ち、 iframeは正しい動画ですか？

これは会社のためであり、私はHTMLページにしかアクセスできません。ヘッドセクションに機能を置くことができれば、それだけです。

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; 
} 

..だから与えるあなたiframeid、及びそのsrc属性を変更します。

Answer 2

は、これらの参考文献を含む。あなたはbootstarapモーダルポップアップからポップアップを得ることができます

1. jqueryの参照
2. ブートストラップjsの参照
3. ブートストラップCSSリファレンス

REF：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>

私はこのソリューションをコーデックチェックアウトで返します：http://codepen.io/rajashekar2012/pen/dMrodq