Onclick Befehl, der den HTML-Code eines Popfensters bearbeitet

Question

Ich bin ziemlich neu in JavaScript, daher bin ich mir nicht sicher, wie ich das Folgende machen soll.

Grundsätzlich ist die folgende Zeile ist das, was ich werde:

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

Die 0000000 Sie sehen Bedürfnisse der speziellen Code am Ende eines YouTube-Videos zu verknüpfen, so muss es jedes Mal anders sein ich benutze es, zum Beispiel:

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

Was würde mir die JavaScript-Funktion wie zu tun ist, ein Pop-Fenster zu machen, mit der gleichen Breite und Höhe eines YouTube-Videos und bearbeiten sie den HTML-Code in diesem Fenster die haben entsprechendes Video.

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

Was ich nach ist wirklich eine Seite mit allen unseren Video-Bewertungen, die wir für unser Unternehmen tun, klicken wir die Vorschau für das Produkt und die popWin() kommt mit dem Video bis sie suchen. Ich verstehe, ich kann ein paar Seiten mit den richtigen Videos machen und die verwenden, um die richtigen zu öffnen, aber wir haben viele Videos auf dieser Seite zu platzieren, also gibt es eine Möglichkeit, eine Seite zu haben und den Code in der ändern iframe um das richtige Video zu sein?

Nur ein Kopf, da dies für eine Firma ist, habe ich nur Zugriff auf die HTML-Seite und nichts anderes, solange ich eine Funktion in den Kopfabschnitt, die in Ordnung ist, setzen kann.

Answer 1

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

Also .. Geben Sie Ihr iframe ein id, und ändern Sie das Attribut src davon.

Answer 2

enthalten diese Referenzen. können Sie das Popup von bootstarap modalen Popup

1. jquery Referenz
2. Bootstrap js Referenz
3. Bootstrap CSS Referenz

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>

Ich habe diese Lösung in Codepen-Kasse zurück: http://codepen.io/rajashekar2012/pen/dMrodq