I'd like to use JavaScript to enable PiP on Youtube videos. I am able to do so on html <video>s but it seems impossible to do so on Youtube <iframe>s. Has someone any lead on this?
Users may be able to right click twice (to bring up the html5 menu) and select Picture in Picture, but it seems to be impossible to trigger it programmatically from outside the iframe due to the same origin policy for iframes. I don't imagine that the &origin= parameter in the iframe URL actually changes the headers sent from youtube, it didn't seem to work in my testing.
SecurityError: Blocked a frame with origin from accessing a cross-origin frame
The youtube iframe api gets around this by using postMessage, however there are no messages implemented at the moment to execute video.requestPictureInPicture(). There seems to be a togglePictureInPicture function defined inside the player base.js script but this doesn't seem to be exposed through the message passing API
I always use the next line in the console, on the youtube page:
document.getElementsByTagName('video');
This will show a HTML Collection, open it and right click on the first position of the collection, store it as global variable, this will generate something like temp1. Then you have to write the next line:
temp1.requestPictureInPicture();
And that's it.
You cannot enable PiP programatically using Youtube's iframe embed. The only option is to get the URL directly to Google's streaming servers or stream the video data yourself. Either way you need a stream URL to set as the src for a video element, then call video.requestPictureInPicture() on the video.
https://r4---sn-4g5ednls.googlevideo.com/videoplayback?expire=1627319351&ei=15...
Thats what a stream URL for a video hosted by google looks like. A guy name Levi wrote a library to retrieve this URL for a given Youtube video. But the library makes request to his proxy server yt2html.com in order to retrieve this URL.
I go in more detail on the issues with YT PiP in this blog post.
Here is a test case from the developers: https://beaufortfrancois.github.io/sandbox/media/iframe-video.html with PiP
There are lots of examples in the documentation:
Read more about that topic: https://developers.google.com/youtube/iframe_api_referenceand about PiP-Api: Picture-in-Picture Web API Spec: https://wicg.github.io/picture-in-picture , https://levelup.gitconnected.com/pip-videos-in-a-floating-window-452e775555fe?gi=21f55e7bf6fa
Related
I have a React application. I am trying to live stream on YouTube. What i am trying to achieve is, when i am live on YouTube, i want a certain part of the website to show the live streamed video as embedded. When i am not live, i want this section of the website hidden.
I have tried using the google v3 API but the cost of API calls to search for live videos on the channel is too expensive (i was doing a query to the API and if a video returned i would show the iframe on the site, and if not just hide it). However, with this quota and the usage of the site, this is not a suitable solution.
I also cannot render the content in an iFrame and then just 'getElementById' because then i'd get CORS restrictions. I thought about building some sort of proxy that could just get the HTML from the youtube page and return it to me as a string (by passing the CORS issues), then just checking for an ID to determine if the channel was live or not.
I've tried alot of searching but either im looking for the wrong things or there is limited support for what i'm trying to do. Any other suggestions on how i can achieve this please?
thank you in advance
We have a WordPress blog running under via a reverse Proxy under ourdomain.example.com/blog which embeds YouTube videos.
Now we are seeing requests in the chrome network tab to
POST https://ourdomain.example.com/error_204?a=logerror&t=jserror&type=SyntaxError&msg=Failed%20to%20execute%20%27postMessage%27%20on%20%27Window%27%3A%20Invalid%20target%20origin%20%27data%3A%27%20in%20a%20call%20to%20%27postMessage%27.&line=Not%20available&level=WARNING&client.name=1
This requests lead to problems in our main software (Magento, under '/', showing CSRF problems)
We could just block those requests in the server but we want to understand why they are made.
Did anybody see those requests before?
The YouTube player is apparently attempting to send an internal error report to Google servers, via the endpoint http://youtube.com/error_204, http://youtube-nocookie.com/error_204 or similar. For that purpose, it uses the relative URI /error_204; but for some reason, this relative URI is resolved relative to your domain name, not YouTube’s.
What you should do is ensure that the link to the YouTube video points to YouTube’s domain, not your own. I presume that this is a problem with the configuration of the reverse proxy, but I am unable to say much more without further detail.
The error is originating from YouTube trying to access something on data: which isn't https, or potentially the video is not visible when loaded.
Just search for data: in your project, I don't know what you've got that would be using it.
The error message itself is fairly unhelpful.
The reason was a wrong embed code of the YouTube video
<iframe width="600" height="560" &" frameborder="0" allowfullscreen="" allow="autoplay" data-src="https://www.youtube.com/embed/xxxxx?
There was a wrong & sign, caused by some WordPress template builder
I'm new to Javascript and making Chrome Extensions (I have experience with Python/Java), so please be patient with me. I'm trying to make a chrome extension, and one part requires the duration of a youtube video. I know I need to use the Youtube API, specifically - contentDetails.duration - which returns the length of a video.
I've created the manifest.json file and a .js file that contains some basic framework for using the youtube api. My question is, how exactly do I use all the features for the youtube api? Like Do I just set some variable equal to contentDetails.duration like length = contentDetails.duration? Do I need to input some key somewhere (I got the api key already). Do I put this in the .js file after the search(); in function onYouTubeApiLoad()?
Could someone go into the basics of how to use this method? Thank you so much.
The Youtube API you provided is an HTTP API. This means that you have to send an HTTP GET request, and Google's server will reply with a response. The standard way to create HTTP request from Javascript is to use either XMLHTTPRequest or fetch.
You can demo the API here: https://developers.google.com/youtube/v3/docs/videos/list#try-it
Unfortunately, the APIs are rate-limited and require authentication. To get full access, you have to pay Youtube money. This means that users of your extension won't be able to call the Youtube API.
You're better off having users
1. Open the web page containing the video
2. Query the document for the element
3. Read the duration property to get the length in seconds.
To see what I mean, try entering the following in the Javascript console of a youtube video page.
document.querySelector('video').duration
I have been searching for something in chrome extension reference to find anything that would allow me to manipulate audio level of a tab. Only option that has come to my mind is make script have it go through all elements in page and either remove them or mute them if possible.
But i feel there has to be a way to reroute all audio streams to nothing, like break them from output which is speakers if using audio api of html5...however no avail either with chrome extension apis or web audio api.
Goal: mute all sounds on page (flash, audio element, etc.)
You cannot do this now, although this will hopefully change in the near-term future.
At the moment, there is nothing in the Chrome APIs, although I did propose a tabaudio API back in February (and am working on a new draft -- as well as an implementation -- right now.)
Can you give me an idea as to what you want this functionality for? (They ask for potential uses when proposing APIs.)
Perhaps the closest that you can do is something similar to what the MuteTab Chrome extension does (written by me, http://www.github.com/jaredsohn/mutetab), which basically scans the page for object, embed, audio, video, and applet tags and hides them from the page. Unfortunately, this misses web audio. Also, instead of muting, it "stops" it by removing it from the page, which could block the video or game associated with the sound. Alternatively, if you just care about HTML5 video or audio or Flash that has an API (such as YouTube), you could could use JavaScript to pause or mute things.
There's now a Chrome extension allowing to mute websites by URL using blacklist/whitelist approach called "Mute Tabs by URL".
It does require you to allow it to read your 'browsing history', but description swears that it doesn't store your URLs anywhere, and event points to a location of source code, so you can verify it for yourself
I have a page that is viewed secured with 'https' in the URL, that also contains youtube urls to play video from youtube. Since the youtube URL contains 'http' with no 's' IE is giving an a warning dialog of "This page contains both secure and non-secure Items."
Is there a way I can workaround this in Javascript? Maybe after the page loads generate the youtube player HTML with a function? The url will still have to begin with 'http://'
EDIT: Thanks everyone for the input so far! I know this sounds impossible. I'd be happy if there was some conditional comment or something so I can tell IE to suppress this dialog box. It confuses our customer since most of the world is in IE, FF has much better behavior in that it tells you if you click the broken lock, but not an annoying popoup. This is like a new version of "your program has performed an illegal operation." (user hides from police) I am embedding youtube video onto the page where the src is from youtube. I am using their player, as it is hosted by them. No way out of this that I see.
I guess my fix is to only apply HTTPS to the very sensitive pages (password change, login) and come out of it in all others so youtube videos don't give this popup. I am in PHP and am worried the SESSION will get clobbered if I do this but I guess it is the only way around and will wait to tackle that bear monday.
One thing I've done to work around this problem is to create a page on my SSL site that proxies in the 3rd party resource. That way the client only sees SSL URLs.
For example, you flash player could point to the URL "https://YourSite.com/proxy.aspx?URL=http://www.youtube.com/video.swf". When "proxy.aspx" is called, it would make a new web request to the URL in the query string and return the data to the client.
If you do this you need to validate the proxied URL or use some kind ID so that the URL can not be changed since you are convincing the browser that this content is trusted.
I've worked around this problem on all browsers using the following:
1) Create a thumbnail image of the start of the video with the "Play image" tag on the snapshot and host the image on your own https server. Embed the thumbnail where you want the video to be.
2) When the user clicks on the image invoke a Javascript onclick handler to create a new window with the href of the http embedded youtube video.
function onImgClickHandler() {
//Link to embedded Viddler or Youtube video
var win = window.open("http://www.viddler.com/player/###/", "My Video",
'height=500,width=800,resizable=yes,scrollbars=yes');
win.focus();
}
3) The video will now appear in a popup of the main page.
I usually use videos as tutorials for my site, so having the video in a popup browser window works well because it can be viewed alongside the main content and lets the user follow along with the site. The browsers do not even give a redirect warning that you are invoking an http popup from an https site, so your users will not see any "scary" non-secure item warnings on any browsers.
Hope this helps, I have an example of the above on the landing page of my site: https://drchrono.com/
UPDATE: I made the image preview by taking a screenshot of the playing video.
According to this quite recent YouTube API blog post, embedded YouTube videos already support access via HTTPS. If this is the case, (and I haven't tested it, but equally I have no reason to not believe them), then you should just be able to stick the "s" into your embed URL and it will work just fine.
If there was a way around it would be a security flaw in IE and Microsoft would patch it, so I don't think you're going to get away with mixed content and no warning.
The only alternative is to host the FLVs yourself. There are a number of good SWF based FLV players available.
Having insecure links on a secure web page is an issue that has little workaround. One option is to exclude specific content on your page when a user connects via https. In this way a non-secure page load would display the content and a secure page load would not display the content:
<% if (!Request.IsSecureConnection){ %>
<div>You can't see this if the page is secure<div>
<%} %>
I have used this method with much success... Hope this helps.
I have had this same problem and found a solution.
It works without having to turn of SSL certification.
Step by step guide to fix Google chrome
You can view the fixed page listed below. It has links to YouTube,Flickr and many other websites. It is secure and has been for a few months now. Hope it helps you too.
The mod_rewrite module of the Apache httpd server can be used to embed YouTube videos on SSL secure pages without any errors, as detailed on Adam Mershon's blog.
It involves setting up a rewrite rule to redirect a path within the SSL domain to non-SSL YouTube:
.htaccess
RewriteEngine on
RewriteBase /
RewriteRule ^youtube/(.*)$ http://www.youtube.com/$1 [L]
So that inside your HTML you can embed YouTube link URLs appearing to be from your own domain, such as:
<embed src="https://www.yourdomain.com/youtube/v/mydjFYoD4WS&hl=en_US&fs=1&rel=0&autoplay=1&"
type="application/x-shockwave-flash"
allowscriptaccess="always"
allowfullscreen="true"
width="560"
height="340">
</embed>
Using Javascript to replace the URL does not work. IE7 intercepts the content, and thereafter, the warning.
I tried using (jQuery) $(function() { }); it sortof works. You can click yes/no to the dialog, the content will load nonetheless.
This is a severe problem in my world. It earns my work comments from users like "It's not user-friendly", "It's broken" or "It killed my kitten".
The proxy solution probably is the only pseudo-fix that's gonna roll. Just that it's clearly not a perfect solution either.
I try to navigate this a bit better by running as much of my sites on https as I can. Obviously the youtube case isn't fixed by that.
IE, what a silly hunk of FUD-pushing abominationware. I hope IE9 really is as vastly better as it seems. Just, not supporting XP means, well, it's sort of like it was never released. As the n00biest of users, will unwittingly write-protect the status quo until the XP-powered Chineese Skynet of 2247 finally feeds us the red pill...
Your problem occurs become the main page is grabbed using Https whilst one or more included files ( images, javascript, css etc ) is fetched using http. Fix the http url to be https.