Readdy Write  
0,00 €
Your View Money
Views: Count
Self 20% 0
Your Content 60% 0
Users by Links 0
u1*(Content+Views) 10% 0
Follow-Follower 0
s2*(Income) 5% 0

Count
Followers 0
Login Register as User
Log in Register

Javascript: Youtube Embed Video erstellen aus Text

03.05.2018 (👁4487)


 

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

}