When I'm trying to access to iframe getElementById('video'); it returns undefined and I have tried many methods of accessing to iframe content but nothing works. I want change the playlist styles.
Pls help!!!!
Unfortunately, you can't edit the HTML of an iframe that comes from a different domain.
This comes from the cross-domain policy. More info.
If you still want to do it, you have to be able to run scripts on iframe page, which is not possible for YouTube. (AFAIK) Edit: Didn't know about the YouTube Player API as mentioned by John Ellmore.
Related
We have a NextJS/React application that is receiving HTML from our CMS. That HTML is coming from a TinyMCE editor on our backend and can and will include various embeds, such as YouTube videos, other kinds of videos, podcasts, etc. We add the HTML to our React page using _dangerouslySetInnerHTML. All works fine, except that we wish to add Google Analytics to the page, and thus want to add event listeners to the onplay events of all embedded objects.
I've been researching for a while now to see how to add an onload event to a YouTube video, which seems to require more control of the HTML than we have. So my thought was to grab the video tag inside the iframe and add an onload listener to that. This requires knowing when the iFrame has loaded. I got all of that to work, but am now told
SecurityError: Blocked a frame with origin "http://localhost:8080"
from accessing a cross-origin frame.
when I try to access the video inside the Iframe.
I found this -- YouTube iframe API: how do I control an iframe player that's already in the HTML? -- but it relies on jQuery, which, as I understand it, doesn't play nice with React, so I'd like to avoid it.
It seems like this would be something that has been done before: add Google Analytics to embedded media, for example, listen to onplay events on videos embedded inside iFrames, such as YouTube, inside a React app.
Edit
I found this interesting solution -- How to integrate Youtube Iframe api in reactjs solution -- but it seems to rely on knowing the IDs of the iFrames; the iFrames that we are getting don't have any ID.
Edit 2
As #cbroe points out below, I can add IDs to take advantage of the YouTube solution. However this solution uses the YouTube API. Is there a general solution applicable to all embeds?
I have embedded a player from a site which streams a channel using an iframe. I am able to make the iframe responsive. But the content i.e the video player inside the iframe is not adaptive to the changes in viewport. I have tried several solutions from internet but all of them make the iframe responsive but not the content inside.
Is there any way I can make the video player inside the iframe responsive?
Please note that I don't have access to the source code of the player.
Here's the link to the html file: IFrame Code (I was not able to create a working fiddle of this. So shared the file instead)
Please note that I don't have access to the source code of the player.
You are in trouble
The one major thing to know while dealing with iframe is the source of the iframe
iframe source has the same domain as the main page which renders this iframe: In this case the browser will let you put your hands on the iframe contents and manipulate it as desired. As both the main site and the iframe are unders same domain it means you are a authorized person so you can change the contents if required.
So even if you don't have access to the source code of the file there are still way's to make your contents responsive if they are in the same domain. This would require Jquery
iframe source domain is not the same as your main page which renders this iframe: In this case you cannot do much with the iframe except displaying it in your page. The browser will not allow you to change any stuff on this iframe. This is a security protocol followed in all the browsers.
what happens if at all we are given access to manipulate the contents - Eg: I can render youtube in my iframe of my website and change all the instances of the string "youtube" to my own name, thus making this entire site look like my own. Also I can manipulate the ajax calls, jquery stuff etc,etc.. and get data from the site.
I need to replace a cross domain iframe with the html it contains.
I can add html and javascript to both domains.
I know this should be possible, since youtube seems to do something similar with the comment section.
I would just need to do the same.
If nothing else works, could this also be done using 'postMessage'?
or I could use something like 'document.domain'?
...
okay, since the site didnt let me post the question, I have to write something more I guess.
I need this because I have to create a script to auto-load youtube comments, since they dont load at ALL on older browsers. I tried using iframes to embed the same thing youtube originally does. But since the content is retrieved from apis.google.com, I had a lot of trouble trying to make it resize itself like it should be. A lot of solutions seem to not work on older browsers, but thats why I need this in the first place. I noticed in firebug how the comments dont seem to open in an iframe, even though I was sure they did. I could even open the frame itself sometime ago, thats how I got the URL the comments are called from. Now only that site's html can be seen there, embedded inside the container.
I would be grateful if anyone finally gave a solution.
You want the YouTube Comments API which returns sets of author, title, and content for a video. I believe you are free to stylize this information however you want.
If you insist on working with iframes then this may be a duplicate of : Cross domain iframe content load detection
This is for when the page containing the iframe is on a different domain.
For example, when loading this page in an iframe ( http://bleacherreport.com/articles/1707335-5-green-bay-packer-players-who-will-surprise-in-training-camp ), the slideshow buttons will no longer work and comments will not show because the JS won't load. I've seen sites like StumbleUpon get around issues like this. How can this be achieved?
I ended up finding a simple solution.
Add allow-same-origin to the sandbox attribute of the iframe tag.
I have no idea why this works because they are different origins, but this allows the slideshow and comments to show up on bleacherreport, yahoo, and many other articles where it wouldn't before.
I just want to open 4 pages in one page with 4 frames. but dont know how.
I want to see facebook, youtube, ebay and amazon on the same page.
Im using the onload event and try to find a code in JS to go to the page url but im clueless.
No need for JavaScript, just set the src attribute if your <iframe> tag.
You should be aware though that many sites will bust out of these frames. I suspect that Facebook will for sure.