youtube in iframe causes thousands of warning messages in chrome

user_2318498 0
Viewed 315

I have a page that has a hundred or so youtube links in iframes, something like the sample code below. The page loads but the youtube images appear really slowly (several minutes) and some not at all, and I get thousands of warning messages. PHP is the code base.

For the sample code below with only 7 youtube links, the chrome browser yields 400+ console messages and it takes about 3 or 4 seconds to complete loading.

The chrome console messages I get are:

Category - other, qty. 406: Error with Permissions-Policy header: Unrecognized feature: 'ch-ua-full-version-list'.

Category - base.js, qty. 28: [Violation] Added non-passive event listener to a scroll-blocking event. Consider marking event handler as 'passive' to make the page more responsive. See

Category - base.js, qty. 14: [Violation] 'setTimeout' handler took (N)ms (N between 80-150ms)

Category - www-embed-player.js, qty.14: [Violation] 'setTimeout' handler took (N)ms (N between 80-150ms)

<body>
    <div style="max-width:400px;margin:auto;">
        <div><iframe title="YouTube video player" src="https://www.youtube.com/embed/T0olzS2ElKo" allowfullscreen="true" ></iframe></div><br>
        <div><iframe title="YouTube video player" src="https://www.youtube.com/embed/T0olzS2ElKo" allowfullscreen="true" ></iframe></div><br>
        <div><iframe title="YouTube video player" src="https://www.youtube.com/embed/T0olzS2ElKo" allowfullscreen="true" ></iframe></div><br>
        <div><iframe title="YouTube video player" src="https://www.youtube.com/embed/T0olzS2ElKo" allowfullscreen="true" ></iframe></div><br>
        <div><iframe title="YouTube video player" src="https://www.youtube.com/embed/T0olzS2ElKo" allowfullscreen="true" ></iframe></div><br>
        <div><iframe title="YouTube video player" src="https://www.youtube.com/embed/T0olzS2ElKo" allowfullscreen="true" ></iframe></div><br>
        <div><iframe title="YouTube video player" src="https://www.youtube.com/embed/T0olzS2ElKo" allowfullscreen="true" ></iframe></div><br>                
    </div>
</body>

Few questions I have, your suggestions are welcome:

  1. What is happening that the browser is giving so many warning messages?

  2. Is there a way to eliminate the console messages, get fast loading, with a little code tweaking?

  3. If not (2), then what is a good coding approach? Perhaps to display the youtube image thumbnails first, then allow clicking on them to dynamically load the real video player in an iframe through an ajax routine? Is this the preferred method of displaying hundreds of youtube videos on a page?

Thanks in advance!

youtube iframe html php javascript
1 Answers

I think there are no problems in the code or even in the browser..

I have tried your code and the output shows like this:

It shows that the problem is from the video, you cant watch these videos. You can watch theme only at YouTube, because when I changed the videos URL it works fast and there are no problems..

It works like this:

You can try this code I changed the video URL and it works! You can change the URL :

<body>
<div style="max-width:400px;margin:auto;">
    <div><iframe title="YouTube video player" src="https://www.youtube.com/embed/oGDGIICqB_s" allowfullscreen="true" ></iframe></div><br>
</div>

Mohammed Maged;

user_179749150
Related