Mobile.Wapka.Co

Hello Friends, How are you all, today i am going to show you how to converts youtube links into embedded iframe elements and replaces them embedded in an html block. this only for wapka. so lets get started:

Use this script in the footer page...

<script type="text/javascript">
createYoutubeEmbed = (key) => {

return '<iframe width="420" height="345" src="https://www.youtube.com/embed/' + key + '" frameborder="0" allowfullscreen></iframe><br/>';
};

transformYoutubeLinks = (text) => {

if (!text) return text;

const self = this;


const linkreg = /(?:)<a([^>]+)>(.+?)<\/a>/g;

const fullreg = /(https?:\/\/)?(www\.)?(youtube\.com\/watch\?v=|youtu\.be\/)([^& \n<]+)(?:[^ \n<]+)?/g;

const regex = /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/watch\?v=|youtu\.be\/)([^& \n<]+)(?:[^ \n<]+)?/g;


let resultHtml = text;



// get all the matches for youtube links using the first regex

const match = text.match(fullreg);

if (match && match.length > 0) {


// get all links and put in placeholders


const matchlinks = text.match(linkreg);


if (matchlinks && matchlinks.length > 0) {



for (var i=0; i < matchlinks.length; i++) {




resultHtml = resultHtml.replace(matchlinks[i], "#placeholder" + i + "#");



}


}



// now go through the matches one by one


for (var i=0; i < match.length; i++) {



// get the key out of the match using the second regex



let matchParts = match[i].split(regex);



// replace the full match with the embedded youtube code



resultHtml = resultHtml.replace(match[i], self.createYoutubeEmbed(matchParts[1]));


}



// ok now put our links back where the placeholders were.


if (matchlinks && matchlinks.length > 0) {



for (var i=0; i < matchlinks.length; i++) {




resultHtml = resultHtml.replace("#placeholder" + i + "#", matchlinks[i]);



}


}

}

return resultHtml;
};

const htmlContent = document.getElementById('contentToTransform');
htmlContent.innerHTML = transformYoutubeLinks(htmlContent.innerHTML);
</script>

Now Use This Div element where you want to use this function:

<div id="contentToTransform">%content% or where want to use it</div>