Embedded videos not displaying on page

Question

I am building a wordpress site related to a rare disease that I have. On one page, I am listing a number of videos related to the disease. In total, there are 34 videos. I have the videos embedded into the page and I'm using the and tags to hide the videos until the user clicks the summary link. The issue I'm having is that the videos often don't load, even after clicking the summary link. I'm new to wordpress and not sure if this is a wordpress issue or if it's caused because there's so many videos...or both. Does anyone have any idea what the issue might be and how I might fix it? Thanks.

In case it's helpful to see the site, it's here: https://www.myotoniacongenita.info/?page_id=13

Answer 1

Firstly - what a great project! Well done on pulling all of this info together.

If I look at the code in your page I can see that the videos are set with a width of 0 and a height of 0. So they are there - just not visible (essentially less than one pixel in size!). These dimensions is sometimes added dynamically but can also be hard coded or controlled in a plugin. How are you adding the embeds - pasting in the code manually or using a plugin?

Tip: If you right click your page in Chrome (or any browser, though they differ slightly) and click 'Inspect' you can see all of the raw code. You can find your iframe elements containing the videos (click inspect when hovering over the summary). If you click/focus on the iframe you will see they are height/width 0. You can actually change these within inspector to see that by adding a suitable width/height you will see the videos - this is not a permanent change, it's just proving a potential solution.

I hope this helps you in tracking down the issue.

Additional - here is what I see in Inspector when I view the iframe. Note the dimensions towards the end of the element.

<iframe title="Myotonia Congenita Simplified" src="https://www.youtube.com/embed/1yiPdaGb-nw?feature=oembed" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" data-ratio="0.5625" data-width="640" data-height="360" style="display: block; margin: 0px; width: 0px; height: 0px;"></iframe>