Wie öffne ich YouTube-Viode innerhalb meiner Website, ohne die URL zu ändern?

Ich habe einen Link im Menü meiner Website namens Video, ich möchte Nutzern ein YouTube-Video zeigen, aber ich möchte nicht auf die YouTube-Website springen. Ich möchte es auf meiner Website wie folgt zeigen. Ich besuchte diese auf einer WebsiteWie öffne ich YouTube-Viode innerhalb meiner Website, ohne die URL zu ändern?

es so etwas wie ein Spieler in Website. Gibt es irgendeine Möglichkeit, so etwas zu implementieren? schätze jede Hilfe sehr.

Hier ist der Code, den ich bei Bedarf Video zeigen muss.

 <li class="dropdown"> 
     <a href="#" class="main-menu"><span class="text">documents</span><span class="fa fa-angle-down icons-dropdown"></span></a> 
      <ul class="dropdown-menu dropdown-menu-1"> 
       <li> 
       <a href="http://www.youtube.com/....." class="link-page"> <span class="text">vidéo</span></a> 
       </li> 


      </ul> 
    </li>

Quelle

2017-12-17 neda Derakhshesh

Gehen Sie das YouTube-Video. Klicken Sie auf "Teilen". Klicken Sie auf "Einbetten". Kopieren Sie den HTML-Code auf Ihre Seite. – Eddie

Ich würde vorschlagen, für Sie modal Link zu diesem prüfen Snippet Beispiel unten zu verwenden.

$(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://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></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> 
 

 
<li><a href="index.html">Document</a> 
 
        <ul class="dropdown"> 
 
        <li><a onclick="changeVideo('pu1jqT5dPj0')">video</a></li> 
 
    
 
        </ul> 
 
       </li> 
 
    
 
    
 
    <!-- 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>

Wenn Sie einige Änderungen möchten Sie diesen Link https://appleple.github.io/modal-video/ überprüfen können.

Wenn Sie Bootstrap-Anwendung verwenden können, diese https://getbootstrap.com/docs/4.0/components/modal/

lesen können Sie mit den Eigenschaften basieren auf Ihren Anforderungen spielen.

Quelle

2017-12-17 13:23:15

@nedaDerakhshesh Sie verwenden einen Bootstrap? –

danke gelöst. Es zeigt sich zwar ganz in Ordnung aber die Schließen-Taste schließt das Fenster aber es hält das Video nicht an. Geräusche spielen immer noch im Hintergrund. Ich weiß nicht, wie ich Ihnen danken kann, Schätzen Sie, wenn Sie mir helfen, das Video auch zu stoppen, und ja, ich benutze bootstrap –

Dies ist eine andere Frage, es hängt davon ab, wie Sie sich bewerben. Wenn du meiner Antwort folgst, hört das Video auf. Aber wenn Sie modale Bootstrap-Dokumentation folgen, dann fügen Sie einfach den Youtube-iframe zu modal body hinzu, folgen Sie nicht meinem Javascript und fügen Sie diesen Code $ ('# myModal') hinzu. On ('hide.bs.modal', function() {$ ("div.modal-body ') .html (' '); –

#yt{display:none;}

<li class="dropdown"> 
 
     <a href="#" class="main-menu"><span class="text">documents</span><span class="fa fa-angle-down icons-dropdown"></span></a> 
 
      <ul class="dropdown-menu dropdown-menu-1"> 
 
       <li> 
 
       <a onclick="document.getElementById('yt').style.display='block'" class="link-page"> <span class="text">vidéo</span></a> 
 
       </li> 
 

 

 
      </ul> 
 
    </li> 
 
    <div id="yt"> 
 
    <iframe width="560" height="315" src="https://www.youtube.com/embed/lJIrF4YjHfQ" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe> 
 
    </div>

müssen Sie die ganze Zahl Option in youtube Panel kann

Quelle

2017-12-17 12:30:16 Robin

vielen Dank. es funktioniert gut, aber wissen Sie, was mit 'CSS' zu tun ist, um es zu zeigen, wenn der Benutzer auf den Link klickt, dann wird die ganze Seite dunkel und deaktiviert und Videos erscheinen in der Mitte? Ich habe vergessen, was ist der genaue Name so etwas zu tun –

yeah es ist möglich, nur validieren meine Antwort mit dem Schild in der Nähe meiner Antwort, die Sache, was Sie sagen, heißt ein Overlay – Robin

sicher danke ich habe –

Sie iframe Video zu zeigen, von youtube verwenden verwenden

aber Sie haben sich zu verstecken iframe & onclickanzeigencss:

iframe{ 
display:none; 
}

iframe{ 
 
display:none; 
 
}

<iframe width="420" height="345" src=""> 
 
</iframe> 
 
<a href="https://www.youtube.com/embed/XGSy3_Czz8k" onclick="javascript:document.GetElementByTagName('iframe').src=this.href; 
 
document.GetElementByTagName('iframe').style.display="block";">adas</a>

Quelle

2017-12-17 12:32:14

Wie öffne ich YouTube-Viode innerhalb meiner Website, ohne die URL zu ändern?

Antwort

Verwandte Themen