Works great but won't play YouTube Shorts

[welbinator]

Context: I'm working in WordPress. I created a custom post type called YouTube with a custom field for the URL of the video.

I add a new "YouTube", paste in the URL and then I have an archive page using a simple loop to display each YouTube post type.

Here's my implementation:

<div class="entry-content"> 
        <?php
         $youtube_url = get_post_meta( get_the_ID(), 'youtube_url', true );
         ?>
        <div class="plyr__video-embed video-apex">
            <iframe
                src='<?php echo $youtube_url; ?>'
                allowtransparency
                hideControls
            ></iframe>
        </div>

As you can see, the URL is being pulled from the custom field I mentioned and stored in the variable $youtube_url

This works perfectly, with one exception:

Expected behaviour

I expect it to display a little iFrame for each video

Actual behaviour

This works for every YouTube video except for YouTube Shorts Short screencast showing the issue:

Steps to reproduce

Try playing the short, and you get this error: An error occurred. Please try again later. (Playback iID: x5i_kFJFaDnmnC0z) Learn More

Environment

• Browser: Chrome
• Version:
• Operating System: Windows
• Version: 10

Console errors (if any)

Failed to load resource: the server responded with a status of 404 () https://i.ytimg.com/vi/https://www.youtube.com/shorts/16dms8D5qhs/maxresdefault.jpg

Refused to display 'https://www.youtube.com/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://www.youtube.com') does not match the recipient window's origin ('https://apexbranding.design'). q.sendMessage @ www-widgetapi.js:1118

Link to where the bug is happening

https://apexbranding.design/youtubes/

[welbinator]

So changing the video URL from youtube.com/shorts/blahblahblah to youtube.com/embed/blahblahblah fixed the issue.

I'll just have to remember to do that every time I add a video that's a short.

[welbinator]

Maybe y'all could do something like WordPress core did: https://core.trac.wordpress.org/changeset/53106

[AIC-BV]

So changing the video URL from youtube.com/shorts/blahblahblah to youtube.com/embed/blahblahblah fixed the issue.

I'll just have to remember to do that every time I add a video that's a short.

Thanks!

[AIC-BV]

When trying to display the video, the poster is still landscape, instead of portrait.

1. So the poster image should be set manually.
2. And you have to hijack the layout by adding 9/16 aspect ratio instead of 16/9