Solved XenForo 2.2.6 Patch 2 to fix embedded YouTube content

 
Youtube was already blocking "some" ad containing videos to get embedded because embedding removes their ad...(especially damn music videos and popular ones) This was a trick that I were using to make an tool to remove ads from videos. At least it were happening on Android.

So if embedding no longer supports, its good idea to use images, videos that can be easly downloaded with some packages on freebsd sources but what about using iframe that contains whole youtube? Probably that can cause XSS vulnerability but they can only let youtube sites to get iframed and checks if youtube contents title or etc.
 
This is what XenForo's looks like:
<iframe src="https://www.youtube.com/embed/XyG861t9KVA?wmode=opaque " allowfullscreen="true" width="560" height="315" frameborder="0"></iframe>

This what FreeBSD sites embeddeds look like:
<iframe src="https://www.youtube.com/embed/x3PIbZwQW_4?wmode=opaque&start=0&list=" allowfullscreen="true" width="560" height="315" frameborder="0"></iframe>
 
This is what XenForo's looks like:
<iframe src="https://www.youtube.com/embed/XyG861t9KVA?wmode=opaque " allowfullscreen="true" width="560" height="315" frameborder="0"></iframe>

This what FreeBSD sites embeddeds look like:
<iframe src="https://www.youtube.com/embed/x3PIbZwQW_4?wmode=opaque&start=0&list=" allowfullscreen="true" width="560" height="315" frameborder="0"></iframe>
I think there's more happening here than just the html syntax, it's also about the content of the video.
 
This is what bookandfilmglobe.com's iframe syntax looks like:
Code:
<iframe
  width="800" height="450" src="https://www.youtube.com/embed/HnByuUqMeko?feature=oembed"
  frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
Link to bookandfilmglobe.com article with an embedded Stan Lee video:
https://bookandfilmglobe.com/nonfiction/book-review-true-believer-stan-lee/


Test html file test.html:
Code:
<!DOCTYPE html>
<html>
<head> <title>test.html</title>
</head>
<body>

<table>
  <tr>
    <td> <p>FreeBSD forums syntax</p>
    </td>

    <td><p>Blue Oyster Cult video</p>
      <div>
        <iframe src="https://www.youtube.com/embed/0OBs6S1lW_Q?wmode=opaque&start=0&list="
                width="224" height="126"
                frameborder="0" allowfullscreen="true"></iframe>
      </div>
    </td>
    <td><p>Saturday Smiles video</p>
      <div>
        <iframe src="https://www.youtube.com/embed/XyG861t9KVA?wmode=opaque&start=0&list="
                width="224" height="126"
                frameborder="0" allowfullscreen="true"></iframe>
      </div>
    </td>
    <td><p>Stan Lee video</p>
      <div>
         <iframe src="https://www.youtube.com/embed/HnByuUqMeko?wmode=opaque&start=0&list="
                width="224" height="126"
                frameborder="0" allowfullscreen="true"></iframe>
      </div>
    </td>
  </tr>

  <tr>
    <td> <p>XenForo syntax</p>
    </td>

    <td><p>Blue Oyster Cult Video</p>
      <div>
        <iframe src="https://www.youtube.com/embed/0OBs6S1lW_Q?wmode=opaque
        " allowfullscreen="true" width="224" height="126" frameborder="0">
        </iframe>
      </div>
    </td>
    <td><p>Saturday Smiles video</p>
      <div>
        <iframe src="https://www.youtube.com/embed/XyG861t9KVA?wmode=opaque
        " allowfullscreen="true" width="224" height="126" frameborder="0">
        </iframe>
      </div>
    </td>
    <td><p>Stan Lee video</p>
      <div>
        <iframe src="https://www.youtube.com/embed/HnByuUqMeko?wmode=opaque
        " allowfullscreen="true" width="224" height="126" frameborder="0">
        </iframe>
      </div>
    </td>
  </tr>

  <tr>
    <td> <p>bookandfilmglobe.com syntax</p>
    </td>

    <td><p>Blue Oyster Cult Video</p>
      <div>
        <iframe width="224" height="126"
          src="https://www.youtube.com/embed/0OBs6S1lW_Q?feature=oembed"
          frameborder="0"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
        </iframe>
      </div>
    </td>
    <td><p>Saturday Smiles Video</p>
      <div>
        <iframe width="224" height="126"
          src="https://www.youtube.com/embed/XyG861t9KVA?feature=oembed"
          frameborder="0"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
        </iframe>
      </div>
    </td>
    <td><p>Stan Lee video</p>
      <div>
        <iframe width="224" height="126"
          src="https://www.youtube.com/embed/HnByuUqMeko?feature=oembed"
          frameborder="0"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
        </iframe>
      </div>
    </td>
  <tr>
</table>

</body>
</html>
Results:
Screenshot at 2021-07-27 19-20-52.png
 
Nice demo, Vull !

FWIW, xenforo is not in ports... unlike www/phpbb, and probably a few others... XenForo is pretty decent, but if FreeBSD self-hosted using something from its own ports collection, that would look good, IMHO.
 
Thanks astyle. I just hope Youtube/Google reconsiders this new policy of theirs. No telling how many millions of embedded videos have been sabotaged by this change.
 
Ok then. I just go to YouTube and go to a video. Click on share and then selected embedded option.
This is what I got. Its up-to-date and probably working...
<iframe width="560" height="315" src="https://www.youtube.com/embed/NggNXotKjts" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

What it does is:
1)Get real url (https://www.youtube.com/watch?v=NggNXotKjts)
2)Get the video ID by replacing or removing https://www.youtube.com/watch?v= part.
3)Replace {REPL1} with video ID and {REPL2} with video title in this text:
<iframe width="560" height="315" src="https://www.youtube.com/embed/{REPL}" title="{REPL2}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

and then we are good to go

Example:
Code:
example_url = "https://www.youtube.com/watch?v=NggNXotKjts"; 
example_url2 = "https://youtu.be/NggNXotKjts"; 
 
embedded_template = '<iframe width="560" height="315" src="https://www.youtube.com/embed/{REPL}" title="Embedded YouTube Content" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>'; 
 
 
var youtubeUrl2Embedded = (url) => 
{ 
    var content_id;  
    if (example_url.includes("youtu.be")) 
        content_id = url.split("be/")[1]; 
    else 
        content_id = url.split("watch?v=")[1]; 
    var out = embedded_template.replace("{REPL}", content_id); 
    console.log(out); 
 
} 
youtubeUrl2Embedded(example_url);
 
but if FreeBSD self-hosted using something from its own ports collection, that would look good, IMHO.
The forums were running on phpBB initially. But that had its own set of problems. Like not having certain functionality we like to have (mainly on the admin side of things). And maintaining the plethora of plugins we needed was kind of a drag too.
 
Back
Top