Dieses HMTL Javascript Beispiel ersetzt zur Laufzeit auf einer Webseite den Youtube Video Code in ein eingebettetes Youtube Video.
Dabei wird der Eingabe-Text untersucht auf iframe und youtube embed
if (sText.indexOf("iframe") > 0) { var posEmbed = sText.indexOf("https://www.youtube.com/embed/"); .. |
Sobald dieser Text gefunden wird, wird eine eingebettetes Youtube Video erstellt
//--< Create YT_Video >-- var iFrame = document.createElement("IFRAME"); iFrame.setAttribute("width", 859); iFrame.setAttribute("height", 483); iFrame.setAttribute("allow", "autoplay; encrypted-media"); iFrame.src = sURL; //--</ Create YT_Video >--
|
Wie bekommt man den Einbettungs-Code von Youtube?
Video Einbettungscode bekommt man von Youtube, indem man auf ein Video mit der rechten Maustaste (Kontextmenü) klickt.
Dieser Code wird in die Zwischenablage kopiert und kann wie hier folgend in Word oder einer Webseite einkopiert werden
<ifram e width="686" height="386" src="https://www.youtube.com/embed/-YQDi-pynH4" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></ifram e> |
Sobald man auf die Details-Ansicht geht, wird der Embed-Code umgewandelt in ein HTML iFrame Element
function replace_Videos_Embed() { //--------< replace_Videos_Embed() >-------- //*replace Video Embed
var divContent = document.getElementById("divContent"); var elements = divContent.getElementsByTagName("P");
//< loop: children > for (var varLine of elements) { //----< check_line >----
var sText_Original = varLine.innerText; var sText = sText_Original.toLowerCase(); if (sText.indexOf("iframe") > 0) { var posEmbed = sText.indexOf("https://www.youtube.com/embed/"); if (posEmbed > 0) { var posEnd = sText.indexOf("\"", posEmbed); var sURL = sText_Original.substring(posEmbed, posEnd); //< replace > replace_by_YTVideo(varLine, sURL); //</ replace > } } //----</ check_line >---- } //</ loop: children >
//--------</ replace_Videos_Embed() >-------- }
function replace_by_YTVideo(element, sURL) { //--------< replace_by_YTVideo() >-------- //--< Create YT_Video >-- var iFrame = document.createElement("IFRAME"); iFrame.setAttribute("width", 859); iFrame.setAttribute("height", 483); iFrame.setAttribute("allow", "autoplay; encrypted-media"); iFrame.src = sURL; //--</ Create YT_Video >--
//< xchange > element.parentNode.insertBefore(iFrame, element); element.parentNode.removeChild(element); //</ xchange >
//--------</ replace_by_YTVideo() >-------- }
|