This HMTL javascript example replaces the Youtube video code in an embedded Youtube video on a website at runtime.
The input text is examined for iframe and youtube embed
if (sText.indexOf("iframe") > 0) { var posEmbed = sText.indexOf("https://www.youtube.com/embed/"); .. |
Once this text is found, an embedded Youtube video will be created
//--< 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 >--
|
How do you get the embed code from Youtube?
Video embed code can be obtained from Youtube by right-clicking on a video (context menu).
This code is copied to the clipboard and can be copied to Word or a web page as shown here
<ifram e width="686" height="386" src="https://www.youtube.com/embed/-YQDi-pynH4" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></ifram e> |
Once you go to the details view, the embed code is converted to an 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() >-------- }
|