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:
What is happening that the browser is giving so many warning messages?
Is there a way to eliminate the console messages, get fast loading, with a little code tweaking?
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!
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;
Related
I've been trying to emulate this: https://codepen.io/chriscoyier/pen/zawHg
This works when the video is muted, however when I try and remove the &mute=1 in the URL, the video will no longer play.
original:
<iframe id="video" src="//www.youtube.com/embed/FKWwdQu6_ok?enablejsapi=1&html5=1&mute=1" frameborder="0" allowfullscreen></iframe>
adapted:
<iframe id="video" src="//www.youtube.com/embed/FKWwdQu6_ok?enablejsapi=1&html5=1" frameborder="0" allowfullscreen></iframe>
I'm not sure why this is happening.
The expected outcome I'm trying to achieve is on page load, the video starts automatically (with sound), but can be controlled with the custom play/ pause buttons thank you!
Is it possible to disable the video playing on fullscreen?
When I press play on the player on the iOS, it is playing the video in fullscreen mode, whereas in android it is playing in the normal mode.
Sharing the code I'm using
<div>
<iframe
src="https://player.vimeo.com/video/120061340?playsline=true"
frameborder="0"
allowfullscreen="false"
allow="autoplay; encrypted-media"
webkit-playsinline="true"
playsline="true"
playsinline="true"
style="position:absolute;top:0;left:0;width:100%;height:100%;"
controlsList="nofullscreen"
title="Sample Video">
</iframe>
</div>
<script src="https://player.vimeo.com/api/player.js">
</script>
Please let me know if I'm missing something here
You're loading an iframe and trying to put video element attributes on it. Instead of loading the iframe, you'd need to call the video file directly in your own video element. Alternately, you can add a mutation observer that waits for the Vimeo video element to be inserted into the page and which then adds the webkit-playsinline attribute to it.
I am working on an Angular 8 project. I have a requirement that I need to show 6 youtube videos in modal popup. For implementing this requirement I have used this code
This is my Html file code
<iframe [src]="safeSrc1" width="560" height="315" frameborder="0"
webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<iframe [src]="safeSrc2" width="560" height="315" frameborder="0"
webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
This is my ts file code
this.safeSrc1 = this.sanitizer.bypassSecurityTrustResourceUrl("http://www.youtube.com/embed/njTXQKbStoY");
this.safeSrc2 = this.sanitizer.bypassSecurityTrustResourceUrl("http://www.youtube.com/embed/jrZAmrE720A");
After adding this, I can able to show the video in modal popup as the requirement. But I am facing one issue because of this and the issue screenshot is given below.
If I add more youtube video URLs then this kind of more error will occur and this makes my site perform slow.
Finally I got the solution. I researched about the issue and I found that the issue was related to the antivirus installed in my PC. I have seen same issues which uses the iFrame for showing the YouTube videos, thus I understood that it is a common issue. And finally I came in a conclusion that something in my PC is blocking the YouTube URL. I tried remove the antivirus firewall blocking and this worked for me.
Is it possible to have an embed YouTube clip on your website that auto-plays when you load the page and when you press the clip it starts from the beginning
<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1">
</iframe>
I looked around but I can't find the specific functionality I am looking for.
Auto play policy has been changed.
( https://developers.google.com/web/updates/2017/09/autoplay-policy-changes )
If you want to autoplay, add "mute". (Tested in Chrome)
<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1&mute=1">
</iframe>
And you can control the youtube video with JavaScript.
https://developers.google.com/youtube/iframe_api_reference
It can be implemented variously. I made a sample. (use "seekTo" API)
https://jsfiddle.net/raykim2414/uv7b6ty4/15/
it is possible to create a button to play and pause the youtube video when using the youtube script, i mean this
<iframe title="YouTube video player" width="853" height="510" src="http://www.youtube.com/embed/LVcXdMB1_YA?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
i'm using this to load the video, but i would like to have for example a link, saying "Play Video", and when the user click the link, the video start to play, all i've tried ends up in nothing, i even think that it is no way to do this, but to be sure, i came here to SO.