We use cookies to improve your experience. No personal information is gathered and we don't serve ads. Cookies Policy.

ExpressionEngine Logo ExpressionEngine
Features Pricing Support Find A Developer
Partners Upgrades
Blog Add-Ons Learn
Docs Forums University
Log In or Sign Up
Log In Sign Up
ExpressionEngine Logo
Features Pro new Support Find A Developer
Partners Upgrades
Blog Add-Ons Learn
Docs Forums University Blog
  • Home
  • Forums

[solution] Embed youtube in forum

Development and Programming

Ronny's avatar
Ronny
83 posts
6 years ago
Ronny's avatar Ronny

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.

? 1
       
Ronny's avatar
Ronny
83 posts
6 years ago
Ronny's avatar Ronny

Each youtube url will be transformed into an embedded version but links to youtube are respected and remain a link.

       
Robin Sowell's avatar
Robin Sowell
13,255 posts
6 years ago
Robin Sowell's avatar Robin Sowell

That is very, very clever!

       
hlwebdesign's avatar
hlwebdesign
8 posts
5 years ago
hlwebdesign's avatar hlwebdesign

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

       
Ronny's avatar
Ronny
83 posts
5 years ago
Ronny's avatar Ronny

You were faster then I could respond or would have been able to help you. Glad you got it working!

? 1
       
hlwebdesign's avatar
hlwebdesign
8 posts
5 years ago
hlwebdesign's avatar hlwebdesign

Thank you for replying! Yes, I did not give up. Strange that the script in my setup had to be in the HTML and not called in a Template. Tested it also without the Forum running in EE Templates, but that did not help either.

       

Reply

Sign In To Reply

ExpressionEngine Home Features Pro Contact Version Support
Learn Docs University Forums
Resources Support Add-Ons Partners Blog
Privacy Terms Trademark Use License

Packet Tide owns and develops ExpressionEngine. © Packet Tide, All Rights Reserved.