Youtube Video Player Error 153

Show and Tell
1

Hello! I just wanted to jot this down so future versions of anvil devs can find solutions to this issue. I was able to find very little information on the Youtube anvil component anyways, so I hope this helps!

Problem:
Drag and drop the video component into anvil, fill in the video code (i.e. https://www.youtube.com/watch?v=[this is the code] and run your app.

What I was seeing:
Error 153 Video Player configuration error

image
image784×407 20.7 KB

Why I was seeing this:
Youtube was rejecting the request from the anvil component to render an embedded video because the request was being sent with no referrer. Meaning, we are not identifying ourselves when asking for a video to be sent to our component for embedding.

The solution:
I added the following code to my “Any code you write here will run before the form opens.” section of the form in which the Youtube player lived:

First add this import statement to the top:

from anvil.js import get_dom_node

Then add this to run before the form loads:

node = get_dom_node(self.youtube_video_1)        # rename to your YouTube component name
    iframe = node.querySelector("iframe") or node
    if iframe:
      iframe.setAttribute("referrerpolicy", "strict-origin-when-cross-origin")

What this means:
This will tap into the dom node of JUST the youtube video player, and manually assign the referrer policy ‘strict-origin-when-cross-origin’, which is generally considered the safest and doesn’t risk path/query leaks.

So if my custom url is something like example_site. org/video_player_123, youtube will just get example_site .org

Hope this helps someone!

5 Likes