I have a site with a couple of embedded YouTube video's like this:
<iframe src="https://www.youtube.com/embed/UfvceH03iAc?origin=https://braintool.org" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
In my console I get a ton of errors like this:
Failed to load resource: net::ERR_BLOCKED_BY_CLIENT
from googleads.g.doubleclick.net
I assume the errors are being thrown from inside the iframe and so maybe its out of my control, but I don't like seeing all the red on the console! A quick google doesn't show anything obvious. Any thoughts on how to address?
Thanks
It looks like #randy-casburn was right. I have Ad Block Plus running in Chrome. When I turned it off the errors went away.
It works for me. I will say avoid using the query (?origin=https://braintool.org)
Related
I want to hide the source of my youtube video embedded on the website
I have googled a lot and I have found that this feature is deleted .
DO anyone know any clean method to do this.
<iframe title="Tip1" width="1218" height="914" src="https://www.youtube.com/embed/xxxxx?feature=oembed"
frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen="" data-gtm-yt-inspected-1_19="true"></iframe>
Trying to show youtube link without the user can know about the vide source
NB: The most important question is if that possible or not possible on Wordpress Site
Thanks in advance
Short answer, you can't. The same way if you shorten a url into something else then visit it; it will show the original link
You can try to download the video(s) server-side, and either store them to stream them to the client, or directly streaming from youtube to the client.
It will be way harder that just adding the youtube iframe, because you'll need to learn how to get video from YT, then how to stream video file to a website, etc..
Also please read the YouTube Terms of Services before doing anything so you'll know if you can or not make what you wants (legally speaking), because i'm not aware about how you can legally stream from YT.
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;
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.
If I scroll down the video should stop.
I tried a few things from internet but didn't worked. I tried
how can I pause a youtube embed when a user scrolls away
How to play and pause a Youtube video in a webpage while scrolling(using javascript or jquery)?
Autoplay Youtube Video When Scrolled to
It would be a great help if someone can share a good resource of ANGULAR
THIS IS THE CODE FOR HTML I AM GETTING FROM DB
<div class="ast-oembed-container">
<iframe title="Genetics - 's preparation Program"
width="500" height="281" src="https://www.youtube.com/embed/J3CGg1NmA?feature=oembed"
frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media;
gyroscope; picture-in-picture" allowfullscreen>
Why my code is not working, it is still useful to yesterday. Please , I've no idea on it.
<iframe allowfullscreen="" allowtransparency="true" frameborder="0" height="2000" scrolling="no" src="http://www.google.com" width="100%"></iframe>
But it shows on this url with the same code:
<iframe allowfullscreen="" allowtransparency="true" frameborder="0" height="2000" scrolling="no" src="http://www.live3s.com" width="100%"></iframe>
.. I really have no idea. Please help me. I want to iframe this url "http://mmfootballtv.wix.com/home#!youtube-links/uzgjx" . Thank you for interesting my problem.
You can't, below is the reason. In other words the problem is not in your code, there are other google apis which you can use to embed google search, you just need to google it.
P.S. If something is not working as it should you can always hit F12 and check the developer console, that's how i found about the problem.
about:blank:1 Refused to display
'https://www.google.bg/?gfe_rd=cr&ei=pUTEVvKaD4eJ8QeK26n4BQ' in a
frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.
you can't just put another website form a different domain in an iframe. Because of security reasons this is sometimes blocked. It is called clickjacking. for more information https://www.owasp.org/index.php/Clickjacking