After many years, I’m finally upgrading and redesigning my site. I went from 1.7 to 5.3 :shock:
One of the features I’m missing in 5.3 is the fact that youtube is no longer able to embed within the forums. And thus, here is a solution:
Step 1: create javascript template Create a new template, call it “tubify”. Make sure it’s a javascript template!.
Step 2: add code
// SCRIPT TO TRANSFORM YOUTUBE LINKS INTO EMBEDDED VIDEO
// 1. ADD div with ID="tubify" to pages where transform is needed.
// 2. Link to this script from the footer
//<![CDATA[
window.onload=function(){
createYoutubeEmbed = (key) => {
return '<iframe width="711" height="400" 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('tubify');
htmlContent[removed] = transformYoutubeLinks(htmlContent[removed]);
}
//]]>Step 3: open forum-templates
Go to the forum templates: Developer >> Templates >> System Templates Forum >> Threads >> Threads
Step 4: adjust code Within the “Threads” template find the following code:
{include:thread_rows}Replace this with:
<div id="tubify">
{include:thread_rows}
</div>Step 5: embed javascript Go back to the forum templates and find the template Global >> HTML Footer
Find the following code:
</body>Replace this with:
script src="https://domain/index.php/template_group/tubify"
</body>Add brackets <> around the script part. The forum deleted these.
Step 6: Rinse and repeat
Repeat Step 3 -> 5 for each template style you are using.
Credits
All credits should go to this JSfiddle for providing most of the code to embed youtube.
It is a pity that it is impossible for me to switch off the setting ‘Render URLs and e-mail addresses as links’
In my posts the plain YouTube code always gets a href added (by the Forum software) so the above code never ever works.
Question:
How can I swich off the setting ‘Render URLs and e-mail addresses as links if this does not work in the CP? Is there a Config overide?
UPDATE 1 I solved the above problem by installing an addon https://devot-ee.com/add-ons/zeal-stringer (this works only because I must running my Forum in EE Templates because of other issues)
Now all ‘a href’ tags are stripped, the URL is plain text. Just as it should.
Unfortunately the above script refuses to work in my setup. I wonder why. There are no errors in the console, the script is there, the surrounding div has the id needed for the script.
Any suggestions are most welcome!
thanks
PS it is impossible to add an image to this forum.
UPDATE 2
I got it working now. I added the script directly in html_footer before /body tag. Now it works perfect.
So 1) I had to strip the a tags from the link 2) Adding the script without calling it from a Template. Parsing order maybe?
Thanks anyway for adding this very smart solution! My users will love this.
best regards
You were faster then I could respond or would have been able to help you. Glad you got it working!
Packet Tide owns and develops ExpressionEngine. © Packet Tide, All Rights Reserved.