Solved XenForo 2.2.6 Patch 2 to fix embedded YouTube content

Geezer

Aspiring Daemon

Reaction score: 305
Messages: 576

fbsd_

Active Member

Reaction score: 19
Messages: 103

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.
 

fbsd_

Active Member

Reaction score: 19
Messages: 103

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>
 

Vull

Aspiring Daemon

Reaction score: 372
Messages: 645

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.
 

Vull

Aspiring Daemon

Reaction score: 372
Messages: 645

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
 

astyle

Aspiring Daemon

Reaction score: 376
Messages: 858

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.
 

Vull

Aspiring Daemon

Reaction score: 372
Messages: 645

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.
 

fbsd_

Active Member

Reaction score: 19
Messages: 103

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);
 

SirDice

Administrator
Staff member
Administrator
Moderator

Reaction score: 12,032
Messages: 38,480

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.
 
Top