WIP: Youtube video cannot be played - Error 153

Bugs
1

Browser: Brave, Chrome, Firefox
OS: Windows
URL: Služby – RK Stejskal

I am trying to display API query with YouTube playlist. I successfully connected to the YTB API, prepared the slider, displayed the thumbnails. But I cannot play the videos.

I tried Inline player (video module) and link with video ligthbox. I use this as dynamic data:

https://www.youtube.com/watch?v={query_api @key:‘snippet|resourceId|videoId’}

Which correctly renders as:

https://www.youtube.com/watch?v=YHbq3e8_1RU

However, YouTube still tells me, error 153 when I try to play the video

image
image1966×1234 158 KB

image
image1996×444 15.7 KB

It looks like that the Query set to API somehow collides with the YouTube embed?

image
image1203×1197 95.4 KB

Currently, the only way working for me is to use the iframe in code block.

<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/{query_api @key:'snippet|resourceId|videoId'}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

What do you think? Any idea, how to solve this?

2

What exactly are you trying to do here? AFAIK you don’t need to fiddle around with API keys to embed a playlist?

3

I just need to query YouTube video playlists in the Bricks Query and then create a custom sliders with the video thumbs… Isn’t it clear? :slight_smile:

4

Hi @alessykora,

have you changed anything now? Because for me, the videos are working now?

EDIT: I can see, some of your videos are not working. Let me check about it. It seems to be quite common issue lately, unrelated to Bricks.

Best regards,
Matej

5

Hi @alessykora,

I think we could to implement the referrerpolicy='strict-origin-when-cross-origin' attribute to the player.

Here is one StackOverflow answer with the possible solution that does not require us to implement that attribute. Please check it https://stackoverflow.com/a/79805072

I’ve linked this topci to the internal task that we have.

Thank you,
Matej

6

hey Matej, the top videos are embeded with iframe in code block. The bottom ones are within Bricks video element.

image
image1602×621 191 KB

Where should I put the headers? Into the htaccess for whole website or to the API settings in the query?

7

Okay, so what worked for me:

1) Adding this html to the head with snippet:
<meta name="referrer" content="origin" />

  1. I also tried to add the header via preffered WordPress way:
add_filter( 'wp_headers', function( $headers ) {
    $headers['Referrer-Policy'] = 'strict-origin-when-cross-origin';
    return $headers;
}, 999 );

However, it doesn’t worked because of headers being added somehow:

Referrer-Policy: strict-origin-when-cross-origin, same-origin, same-origin

I am not sure where the same-origin, same-origin come from. I will see after migration to the production server, if it is caused by CloudPanel which runs this dev site, or not.

Thanks for help.

8

I’m glad you solved it :slight_smile: Once we add the referrerpolicy to the video element, we will update this topic.

Thank you for posting the solution as well. :slight_smile:

Best regards,
Matej

1 Like