I have an iframe that is being loaded and has an embedded facebook video. It loads the facebook sdk and then triggers it to play the video.
The problem is that loading the SDK inside the iFrame is causing the sdk to be initialized in the parent window instead of inside the frame. How do I prevent that from happening so that I can play the video in the iFrame?
(as a side note, I had thought the whole purpose of an iFrame was to prevent code inside it from modifying the parent frame, how is this happening?)
Related
I'm using Revolution Slider in WordPress and I'm running into an issue where on mobile devices, I cannot unmute YouTube videos. I have videos in the slider to be muted on load in and to autoplay. I have interaction and controls both allowed. However, when I try to click the unmute button on the screen, it simply pauses/plays the video. I'm not sure if the pause/play button that appears somehow overlaps and the YT controls are underneath or something. It actually doesn't look like the controls generated from YouTube but instead the RS native controls. I tried turning controls and interaction both off but unsurprisingly, this causes absolutely zero action to happen when you click/press on the video, not even pause/play it.
You can view the issue in action at http://www.hagentertainment.com. The slide in issue is slide #2 out of 3.
Being an issue related to mobile and iframes makes it relatively difficult to diagnose with 100% efficacy. I used Browerstack to open a connection on a Galaxy S20 and noticed the issue as you described.
Using the Dev Tools, I was able to get it to allow the mute button to be clicked by changing the &enablejsapi=1 to &enablejsapi=0. You can see in this screenshot below that after doing that, it allowed it to be clicked. You also have a JavaScript parse error showing in the console - that could potentially be preventing a JS API controller (built into Revolution Slider?) from functioning correctly.
So it looks like your options (for the moment) are to fix that JS error and see if it works, or disable the JS API in the url of the videos
I have successfully created a toolbar Chrome Extension that, when a page is loaded, adds buttons and other content. These buttons can interact with the main page.
What I can't do is update those buttons when I change the state of my Extension - from the popup, for instance.
If background.js knows that a change has happened, can it communicate to the content script to tell it to update the iframe? Without updating the parent page on which it sits?
My content scripts are added to every iframe on page...so there are often 4 or 5 versions of content.js on a given page.
Any high-level guidance deeply appreciated.
Of course the user can just refresh the entire page to get the changes...but I'd prefer to have the iframe toolbar update without the user having to take that additional step.
You can message through background.js to reach the content script...
Then do the following in the content script when receiving a message from background.js:
$('#iframeID').attr('src', $('#annotatePROsidebar').attr('src'));
I have an iframe pointing to my angular application. I need to resize the height of the iframe based on the height of its contents.
The iframe and its host are on the same domain, so there are no cross-domain issues.
I would like to know the height of my angular application when the initial data has been loaded and notify this to the iframe container, so the height can be appropriately set.
I use ng-init to set my angular-applications initial state when the document is first fetched.
$scope.on("$viewContentLoaded", fn) seems to happen too early.
Can I plugin a $(fn); somewhere without breaking too many best practices? Is there another approach?
So I'm using YouTube's iframes in order to show some videos in my app. The thing is I cannot make the videos fullscreen.
I'm using this code:
<iframe width="560" height="315" src="http://www.youtube.com/embed/RnYcPJTtV1A" frameborder="0" allowfullscreen></iframe>
If you write that on a single html file the browser (all of them) will show you the fullscreen button on the far right. But, that same code on a Win8 app (html of course) will display the video but will not show the fullscreen button.
Do you thing that's what YouTube (google) wants? I mean, should I be doing anything different?
Regards
Sebastian,
Something to keep in mind is that iframe within a Windows Store app is designed for limited use only. The certification requirement 2.4 states:
The primary experiences your app provides must take place within the
app
One needs to be very careful about including content from sites you do not control via iframe in a Windows Store app, because this content can change without warning in ways that may break your app or introduce unexpected behavior.
Because YouTube videos may use either Flash or HTML5 for playback, you may find that some videos simply will not play in the context of a Windows Store app, because ActiveX controls are not available in that context.
Given all that, I would not expect to be able to play full-screen video embedding YouTube videos via iframe in a Windows Store app.
So I seem to have found myself in a bit of pickle. In order to keep a header flash element from reloading every time someone goes to a different page, I encapsulated all my site's content in an iframe. Unfortunately, some of the iframe's include thickbox, which opens an iframe of it's own. The iframe that thickbox opens, requires it be opened on the topmost page, so that the fixed attribute allows the iframe to remain static in the viewport. Because we're already nested into an iframe, this isn't possible.
This is the most promising lead I have so far:
http://blog.codepyro.com/2010/01/thickbox-inside-of-thickbox-iframe.html
Unfortunately, that only replaces the iframe that the thickbox is being opened from, with the content of the thickbox.
I also just came across this, but I'm not sure how I would go about retooling it to suit my needs:
open iframe fancybox from within an iframe so that it opens in the parent
Here is a link to what I'm working on:
http://www.lalalandmusicfestival.com/site/
The problem area is on the Talent page.
I think if there was a way to force the link to target the "top" or "parent" page with javascript, it may be possible, but I haven't found anything that's been of any use to me yet.
Thanks in advance for your help!