Forem Creators and Builders

loading...

Issues with YouTube video embed using liquid tag

Ildi
“I'm not saying I'm gonna change the world, but I guarantee that I will spark the brain that will change the world.” - Tupac
・1 min read

I am using Forem for a music community which means there will be many posts containing YouTube videos. Yesterday I started to make a few posts and noticed that some of the YouTube videos I am trying to embed are showing an error. Here are two examples:

I know that iframe embeding works for these videos, for example:

https://rapradar.com/2021/08/13/video-meek-mill-mandela-freestyle/

https://www.vice.com/en/article/m7e4mq/lizzo-featuring-cardi-b-rumors-essay

Im not sure if this is a bug, or if it has something to do with how liquid tags work? Hope to learn more about this "video unavailable, watch on youtube" error.

Discussion (9)

Collapse
ioscasey profile image
Casey 💎

Hey @ildi - I'm bringing this up with our team internally to get an answer for you. After some testing on my own Forem, I've noticed that I got this response from YouTube on all videos that are copyrighted, for example music videos from the artists official accounts. I could be wrong but it's a trend I've just experienced...

Anyhow, hopefully I'll have a confirmed answer shortly for you

Collapse
ildi profile image
Ildi Author

Thank you for looking into this @ioscasey - It is strange that copyright rules would work differently for iframe vs liquid tags since both acomplish the same thing. I am hoping there is a workaround because these are the type of videos my Forem community would be sharing a lot of.

Collapse
ioscasey profile image
Casey 💎

Alright, I've heard back from some of our engineers! It seems that YouTube can allow users to "Restrict Embedding" - which seems to be the case in this issue.

Thread Thread
ildi profile image
Ildi Author

So im assuming these YouTube users are chosing the restrict embedding on apps + block in all apps option. Also im assuming Forem is being considered an app instead of website in this case?

Does this mean that the normal iframe code embed would also not work on Forem since it's considered an app?

I just added one of the videos up top on my own personal website via the normal YouTube iframe embed code and it works without an error.

Thread Thread
ioscasey profile image
Casey 💎

I'm not entirely sure about the first part but I will tag in @djuber who may know more than me about this.

I can confirm that using an iFrame won't work either

Thread Thread
ildi profile image
Ildi Author

I should also mention that these videos seem to also work on Reddit

I guess Forem does not support YouTube iframe embeds?

Thread Thread
djuber profile image
Daniel Uber • Edited

This looks like it might be something with the configuration of the server (security policy would be my first guess).

Removing the infrastructure from the system, I can take the liquid tag input you used in a new article in a development server (at localhost:3000/, running forem's code but none of the other config like nginx or production mode hardening that might be present)

{% youtube P_XPDVOJvm0 %}
Enter fullscreen mode Exit fullscreen mode

and everything appears to work as expected (the iframe loads, the video is playable)

I do see a few header differences in the request, my local instance request to youtube includes a referer header (it's set to localhost:3000/). Omitting irrelevant headers from the requests:

local embedded video from liquid generated iframe

GET /embed/P_XPDVOJvm0 HTTP/1.1
Host: www.youtube.com
Referer: http://localhost:3000/
Enter fullscreen mode Exit fullscreen mode

forem.dev request (from this page):

GET /embed/P_XPDVOJvm0 HTTP/1.1
Host: www.youtube.com
Enter fullscreen mode Exit fullscreen mode

This might be tied to a difference in the values for the referrer-policy header in the forem response, in forem.dev I get back same-origin, my development server sends strict-origin-when-cross-origin.

If youtube's embed player required the referer to be present (for abuse tracking, I would assume), the absence of a referrer in the request might seem suspicious and cause problems. There's a hint that this is in fact a known behavior on a stack overflow answer and the answer following (with the "long read" section that was django specific, but definitely included "same-origin" as the policy setting).

I'm not sure what causes the same-origin referrer policy to be set but relaxing that seems to be one way to solve this.

Thread Thread
djuber profile image
Daniel Uber • Edited

github.com/forem/selfhost/blob/mai... I tracked down where this is set in self-hosted forem instances, you might try adjusting the /opt/forem/configs/traefik/dynamic.toml file's security headers to have ReferrerPolicy="strict-origin-when-cross-origin" (which is default and what we send in local development) and restarting traefik.

I'm not sure what the security implications of this are, but I suspect this resolves the issue you are seeing with embedding videos via the youtube liquid tag.

DEV.to sends strict-origin-when-cross-origin for this header (so some forem seems to use it just fine and youtube image embedding works correctly).

I'll talk this over with our internal teams to see what the reasoning behind the stricter configuration was here.

Thread Thread
ildi profile image
Ildi Author

Thank you digging into this Daniel! My Forem setup is part of the cloud offering so I wont be able to make these changes on my own, however I will be chatting with the Community Success team this week so I will bring this up with them as well.

Im hoping it will be possible for you and the team to set a less restrictive referrer policy if that is the only method of solving for this issue. Glad I got to learn that the error is not being caused by the video owner directly restricting embed access. Thanks again for the break down!