How do I get TimeRanges from the youtube iframe player? - youtube-iframe-api

Is there a way to get the TimeRanges(https://developer.mozilla.org/en-US/docs/Web/API/TimeRanges) from the video element inside the YouTube embed iframe? I can get it by using selectors (document.querySelector(selectorOfTheVideoElement).played) in console but I can't do it in my source code as I get cross-origin error despite having added the origin option in my youtube embed code.

Related

Having trouble Embedding a specific Vimeo Url

I used to embed Vimeo videos with this url format: https://vimeo.com/514607003 (only numbers). It works just fine. But some videos are in an other format and I cant embed them no matter what:
https://vimeo.com/605783608/493d2ee578
I'm getting this error on console when I try to embed it:
GET https://player.vimeo.com/video/605783608 404 (Not Found)
when I add the second Id of the video Url to the embedded Url, the error remains the same.
The answer appears to be to embed the video with a special query parameter h containing the second key:
https://player.vimeo.com/video/605783608?h=493d2ee578
This is determined by looking at Vimeo's own embed code; I did not find documentation explaining why this is.

scraping video links from lazy loaded videos

I am trying to scrape a video from a page using a package called icrawler, but that video is not rendered instantly when a page loads, so when I get the html code of that page, the video tag doesn't exist but it does if I open the page in the browser and inspect.
How do i wait for the page to load the video before crawling it ?
The page most likely loads the video using javascript so, you would need library capable of rendering/executing HTML and javascript.
I took a quick look at icrawler and according to the doc it uses Cheerio which quoting from its doc "does not produce a visual rendering, apply CSS, load external resources, or execute JavaScript".
The same docs mention that you could use something like PhahomJS (seems to be abandoned) or JSDom. Another alternative is to use Selenium.

IFrame with inline source (data:text/html...) gives a cross-domain error

I'm currently making an Iframe using javascript but when I try to access the iFrame using myIframe.contentWindow.document I receive the following error:
DOMException: Blocked a frame with origin "http://localhost:8082" from accessing a cross-origin frame.
You cannot edit the contents of an iframe for security purposes. It seems like you might be trying to set content in the iframe since the cross-origin error is being thrown. You can copy the contents of the iframe to another object then edit it.
Things to consider if this is true...
Use AJAX via jQuery.. How to copy iframe content to div?
If using Chrome, understand that Chrome does not support local CORS... Deadly CORS when http://localhost is the origin

How to disable Learn More anchor tag in youtube embed iframe

I am using youtube embed iframe for playing videos. If the src of the url does not contain valid URL on playing the video it throws "An error occured. Please try again later'. and there will be Learn More anchor tag. How do I disable that anchor tag using javascript?
It's not possible with JavaScript, as you can not access an iFrame from a different domain.
If you want to be sneaky, you could overlay the iframe with a z-indexed transparent div stop the user clicking in the iframe.

How can I tell if a page is being served to an iframe?

I took the src url of an iframe containing a google map, and tried to load it in my browser, but I got this response instead:
The Google Maps Embed API must be used in an iframe.
Try it for yourself: link
How does it know that the page is being loaded in a browser, rather than a frame?
if (window==window.top) { /* I'm not in an iframe */ }
Very simple javascript.

Resources