YouTube Videos Not Showing in Browsers

  • yumpun8473

    (@yumpun8473)


    3 years, 10 months ago

    WordPress 5.4.2 using OceanWP 1.8.3 theme.

    Page in question: https://fragmentsweb.org/videos/protest-videos/

    I’ve had nine YouTube videos embedded on a page for several months. Recently I noticed some of them have disappeared and been replaced by just the URL (not even a live link) when viewed in a browser They still look & work fine in the WP editor.

    Now I’m finding the videos seemingly randomly appear & disappear when viewed in browsers.

    I am embedding using the Guttenberg YouTube embed block.

    I’ve tried “Full width” & “Wide width”—doesn’t help.

    I have tested using multiple Mac browsers plus the Amazon browser on my crappy Fire tablet. Same result – for example when the third & forth videos are missing, they are missing in all browsers.

    I know very little about coding & HTML, so pardon my ignorance. But I have noticed a weird thing.

    The code in the WP editor for all the video blocks (working & not working) looks like this (with different URLs, of course):

    <!– wp:core-embed/youtube {“url”:”https://www.youtube.com/watch?v=7MOn3G3TYbM&#8221;,”type”:”video”,”providerNameSlug”:”youtube”,”align”:”full”,”className”:”wp-embed-aspect-16-9 wp-has-aspect-ratio”} –>
    <figure class=”wp-block-embed-youtube alignfull wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio”><div class=”wp-block-embed__wrapper”>

    </div></figure>
    <!– /wp:core-embed/youtube –>

    But in the browsers, videos that are showing up have this code (with different titles & URLs, of course):

    <figure class=”wp-block-embed-youtube alignfull wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio”><div class=”wp-block-embed__wrapper”>
    <p class=”responsive-video-wrap clr”><iframe title=”2019 Climate Strike Rally—Raleigh, NC” width=”1200″ height=”675″ src=”https://www.youtube.com/embed/7MOn3G3TYbM?feature=oembed&#8221; frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe></p>
    </div></figure>

    While videos that are missing (displaying only the YouTube URL) have this code (with different titles & URLs):

    <figure class=”wp-block-embed-youtube alignfull wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio”><div class=”wp-block-embed__wrapper”>

    </div></figure>

    Why would browsers randomly interpret the same code in different ways?

    The page I need help with: [log in to see the link]

Viewing 15 replies - 1 through 15 (of 15 total)
  • Animesh Gaurav (a11n)

    (@bizanimesh)

    3 years, 10 months ago

    Hi there!

    Are you embedding like this: https://imgur.com/a/sxG83Ae

    Learn more about embedding YouTube videos here: https://wordpress.org/support/article/youtube-embed/

    Also, I have checked the source code.

    The source code of videos that are successfully embedded and videos that are not embedded is not matching.

    Please try again to embed as I have shown in the above GIF. 🙂

    Thread Starter yumpun8473

    (@yumpun8473)

    3 years, 10 months ago

    I am embedding all the videos as shown in the GIF.

    Animesh Gaurav (a11n)

    (@bizanimesh)

    3 years, 10 months ago

    Hi there!

    Then there shouldn’t be any problem.

    1.

    Can you please go to your YouTube Studio > select the video that you want to embed > Go to the Advanced option > Scroll down to check if you have “Allow embedding” option is selected or not.

    If it is not selected, please select it and try again.

    If it is selected, come on the next step.

    2.

    I’m picking your first YouTube video that is showing the link only, see here: https://prnt.sc/t6qtqs

    So I want you to delete that embed block completely, again insert a new YouTube embed block there.

    And instead of this link: https://www.youtube.com/watch?v=wMOKnbtMJ2U, please use this one to insert in the embed link box: https://youtu.be/wMOKnbtMJ2U

    Then update the page and clear your cache. Check if it works?

    3.

    If it is not working, please use a normal Embed box (this one: https://prnt.sc/t6qy04) in place of the YouTube embed box.

    Again use the same YouTube link that I have provided to you.

    If it is also not working, come to the next step.

    4.

    Find Custom HTML block (this one: https://prnt.sc/t6r2b7) and paste below code in it:

    <iframe width="560" height="315" src="https://www.youtube.com/embed/wMOKnbtMJ2U" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

    Please check all steps and see what is working and what’s not? 🙂

    Thread Starter yumpun8473

    (@yumpun8473)

    3 years, 10 months ago

    Thanks, Animesh. I’ve already tried those things, except #4.

    I don’t want to start messing with inserting code if I don’t have to. First, the code my WP page is the same for working & non-working videos. Secondly, it should just work with the YouTube embed block, like it apparently does for everyone else using WP.

    There must be something else wrong with my page. The browsers seem to be interpreting the code differently for some of the videos.

    As an experiment, I’ve broken the videos into two pages (5 & 3/page) and it seems to be working fine (for now anyway—I will continue to monitor it for a while before revising the topology of my site, which I prefer not to do).

    fragmentsweb.org/protest-vids (5 videos)
    fragmentsweb.org/climate-protests (3 videos)

    Is it possible there were too many embeds on the page for the browsers?

    Animesh Gaurav (a11n)

    (@bizanimesh)

    3 years, 10 months ago

    Hi there!

    There is no relation to the number of embeds with the browser.

    I have taken your all videos and embedded them on a page.

    You can see here: https://prnt.sc/t758kt, all videos are displaying perfectly.

    You can also test at your side.

    Sometimes clearing the cache or embedding videos on another page/post solve the issue.

    Separating videos in two posts/pages wouldn’t be a good idea.

    You can go with my Step #4 (mentioned above) to embed the rest videos using HTML block. That process is also very easy, you only need to follow some basic steps. 🙂

    Thread Starter yumpun8473

    (@yumpun8473)

    3 years, 10 months ago

    I have copied the YouTube embed code for the nine videos into Custom HTML blocks. The videos are now all showing up in browsers.

    I don’t like the lack of control over alignment and size that I had with the YouTube embed block, but I guess I’ll have to live with it. Is it the case that the YouTube block is not consistently reliable? Guttenberg has been a nightmare.

    Thanks for your help, Animesh.

    Animesh Gaurav (a11n)

    (@bizanimesh)

    3 years, 10 months ago

    Hi there!

    I don’t like the lack of control over alignment and size

    You can adjust the size of the video by changing the height and width value. Also, you can adjust its alignment.

    If you want I can assist you with that. 🙂

    Guttenberg has been a nightmare.

    I don’t know exactly why that is causing the problem because the same videos are working on my side with the YouTube embed block.

    As I told you previously if you would try again to embed all videos on a new page/post using YouTube embed block then they might start to display all the videos.

    Thread Starter yumpun8473

    (@yumpun8473)

    3 years, 10 months ago

    Thanks, Animesh. I’m going to live with it the way it is for now.

    By the way, I already tried recreating the page from scratch and found the same problem. Also, at one time the page was displaying correctly. There must be some corruption somewhere.

    Animesh Gaurav (a11n)

    (@bizanimesh)

    3 years, 10 months ago

    Thanks, Animesh. I’m going to live with it the way it is for now.

    🙂

    pennylaner

    (@pennylaner)

    3 years, 9 months ago

    Hi all – I hope you don’t mind me jumping onto this thread. I am having the same problem. Embedded videos that have worked fine for more than a year are now only showing a URL.

    Here is one example, working normally in the post editor: https://ibb.co/bBMFybV

    Here is how it appears in the browser: https://ibb.co/MncFfbB

    I have tried deleting the block and re-embedding, using the regular video block (it automatically converts to YouTube), etc. Do I need to use custom code? How can I keep the video’s captions intact, and make videos centered?

    We updated to the latest version of WordPress last month. Could this be related to that?

    Thanks so much in advance if you can help!

    Animesh Gaurav (a11n)

    (@bizanimesh)

    3 years, 9 months ago

    Hi @pennylaner

    Did you check all these steps:

    https://wordpress.org/support/topic/youtube-videos-not-showing-in-browsers/?view=all#post-13037619

    pennylaner

    (@pennylaner)

    3 years, 9 months ago

    Hi @bizanimesh – yes, like yumpun8473 I tried 1-3 and they didn’t work. It sounds like my only option may be to embed via html, as well? Do you know if there is a way to keep the video’s caption and center it with that method?

    Thanks so much for your help!

    Animesh Gaurav (a11n)

    (@bizanimesh)

    3 years, 9 months ago

    Hi @pennylaner

    Yes, if the above steps are not working then it is better to go with embed via HTML.

    Sorry for the problem and block embed issue should be solved in WordPress 5.5 update. In this version, some new features and improvements have been added for the block editor.

    Learn more here: https://wordpress.org/news/2020/07/wordpress-5-5-beta-1/

    Do you know if there is a way to keep the video’s caption and center it with that method?

    To do this perfectly, you have to add some line before and after your iframe, like this:

    <div style="text-align:center;"><figure class="wp-block-embed">iframe width="640" height="360" src="https://www.youtube.com/embed/j7YbVkVL5ag" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe><figcaption>Luca M. Damiani, My Aspie with Tinnitus and Hyperacusis. Video, 2018</figcaption></figure></div>

    You can directly copy and paste the above HTML in your post.

    Note: You can change width and height according to your requirements. 🙂

    pennylaner

    (@pennylaner)

    3 years, 9 months ago

    Dear @bizanimesh,

    Thanks so much, you really helped me! Until the blocks’ issues are worked out, it’s very helpful to have the workaround spelled out like this. I kept getting the coding order wrong but now it’s working.

    Many thanks!

    Animesh Gaurav (a11n)

    (@bizanimesh)

    3 years, 9 months ago

    Happy to help. 🙂

Viewing 15 replies - 1 through 15 (of 15 total)
  • The topic ‘YouTube Videos Not Showing in Browsers’ is closed to new replies.