Jquery :: Embedded YouTube Video Not Working With Overflow:hidden
Jun 15, 2011
I'm having issues with a YouTube video breaking a jQuery slider when viewed on an Apple mobile device. The slider uses a set width & height window that uses the overflow:hidden property. It looks great in all browsers except for Apple devices where all of the slides are visible in a row as if the overflow:hidden property did not take effect.
I created an ajax jQuery featured content slider that will automatically navigate through each tab. Each tab has some basic html. The one I used is this one: [URL]. For some reason, when I embed a flash video in it, the flash video overflows the div. It looks fine in Chrome and Safari but not the latest version of Firefox (3.6) on the PC. Is it not handling overflow or z-indexes correctly?
I have researched the infamous 'Flash hogging keyboard focus' issue, but I believe our issue may involve a workaround that someone else has already come across. I've tried the various solutions I've found on stackoverflow and other sites, which I summarize below.We have a web app, and a particular interface loads several divs that we are using as "tabs". When a user clicks one of the tabs, we hide the current div and un-hide the new one. Our main tab (which is loaded when the page loads) embeds a document from Scribd, which is loaded as a Flash movie. When a user clicks on the Flash movie, they scroll with the mouse/keyboard like normal, and when they click outside of the document control returns as expected.When they navigate to another tab and then return to the original tab and click on the embedded Flash to navigate within it, the embedded Flash steals control of the mouse scroll and won't let it go. The user can click in this document and scroll with the arrow keys and then click out of the document and scroll the parent window with the arrow keys, but mouse scrolling is still bound to the embedded Flash movie. The only remedy is a hard page refresh.[code]This doesn't work -- I can confirm that the element is removed from the DOM, but when it is returned to the DOM it hogs mouse scrolling when clicked just like before.I also tried a similar solution, but instead of removing the element I called [code]
But I need my video in DIV2 to STOP PLAYING when it's hidden, and start from the beginning when you show it again. From what I read, I need to remove it from the DOM...but I don't understand how to re-add it. I've seen suggestions for detach(); but can't figure out where my AppendTo() would go.
I need to autoplay youtube video as I click on its thumbnail.Since IE doesn't support <EMBED> tag I need preset all needed values in <OBJECT> and then create a new object with my parameters.So I did something like this:
var $newObject = jQuery('<object><param name="play" value="true"/>' + $oldObject.html() + '</object>'); // preparing virtual object on the fly. $thisObject.html($newObject.html()); //Creating new object
It works with Firefox and Chrome, but something's not quite right in IE6. Sadly, one of the project requirements is supporting this browser, so even if it workis in IE7, I need to work this out.I know there's SWFObject, but I'd rather not use it (we are loading already a bunch of JS files, we don't want more).Even this won't work:
I am trying to get a youtube video to play in a fancybox popup window. The popup window comes up okay, but the video does not play. Firebug indicates that all the necessary elements are loading, but no video.On this page everything works fine.On this page the window pops up but no video. Here is the html:
I have imported movieclip on my stage. But this movieclip has objects which lay out of borders of this movieclip, so I've got part of objects on stage which must be invisible, but they are not invisible.
i've got a problem with a Flash website that has been driving me crazy. i have a Flash website that was built for us in late 2009, it uses ActionScript 2 and i have been maintaining it in CS3 on a Mac.
the site is structured as a heirarchy of swf files, and loads XML files to specify text content, image locations, and Youtube videos. all this has worked fine until sometime in the past month or two. the problem now is that the embedded Youtube videos no longer load, although nothing has changed in the code. unfortunately i don't know exactly when the videos stopped loading.
in the Activity Window of Safari i can see the URLs for the Youtube crossdomain file [URL].. Youtube still for the video, and the Youtube player[URL].. however neither the still frame nor the player skin load.
if i run the site directly from my hard drive (with my Flash Player security preferences set to allow the swf to access the internet), the videos do load and play, so i am guessing that it is some kind of security domain issue. if i run the site in Flash CS3 in debug mode, when i navigate to a video page, although the video loads and plays, i get lots of these warnings (i've edited the path and file name):
The following is the code I am using to display a YouTube embedded video in my flash application.
Code:
Security.allowDomain("youtube.com"); var plr:MovieClip = new MovieClip(); addChild(plr);
[Code]....
I cannot load more than one of those in my app. As soon as I load one youtube vid like that, any others will fail to load UNLESS it was the same video as the first one loaded, in which case there seems to be a 50% chance that it will load. And even when the second one (the same as the first) does load, there are issues with the player loaded.... it seems they are connected somehow and get confused with each other. The trackbar will flicker between the play time of the first one and the play time of the second one.
Next problem... I cannot unload the video right away. Say my user wants to close the video out, when I use:
Code:
ldr.unload()
the player does NOT close its streams and you can hear the audio still playing (assuming it was closed before it was finished playing)...
In my eyes, this is horribly bad programming on YouTube's part. They claim that you are allowed to embed their videos in AS3.0, but if that's true then why does it have such a horrible time as a child SWF? Proper children SWF files should be listening for an "unload" call and close out anything they need to when unloaded.
Here is what I've tried so far:
- Seperating the videos by loading them into other children SWF files (children that I created that I've told to load a specific YouTube vid)
- loading at different times
- Allowing security access from YouTube
How can I load more than one YouTube video into my Flash App without causing problems between them? I'm at my wit's end.
I would like to take a Flash video that is hosted on another site (like Youtube) and embed it into my own site with a custom designed HTML5 / CSS / jQuery GUI for player controls.
Would I have to create the new player GUI in Flash?
I have a modal dialog with a flash video on it and I'm using the jQuery draggable plugin to make it draggable. On Chrome, it doesn't let me play the video (when I click on the play button it does nothing, though I can drag the div around if I hold down the mouse). On Firefox, the video will play, but the mouse gets "stuck" to the div and the div follows it around. Is there some easy way to prevent dragging on the flash div?
I have successfully embedded the youtube video in my flash code with: //create area to put youtube video on screen this.createEmptyMovieClip("reason1_video", 10000); reason1_video._xscale = 60; reason1_video._yscale = 60; this.reason1_video.loadMovie("[URL]");
However, the video plays with black bars on top and bottom even though it plays without those directly from youtube: [URL]. Even if I take off the scaling, it still has the black bars. How do I get rid of them? It seems like youtube uses a different player than flash. [URL]. Click on #1 and you will see the video I am talking about.
My site was 95% point and clicked and the rest getting lucky with mostly the right AS3 after searching the various forums etc. Please be patient and type slowly that I may understand
I managed to get a youtube embedded into my AS3 Flash site. Plays well enough and in the right box. Gota figure out how to default to 480 or 720 but thats not the problem... see below.
My questions is this: is there any way to stop the video from playing all the way through to Youtubes default end screen where it has the Just Watched and Up Next screen? Either by going back to the thumbnail it uses by default or by sending it to another page on my flash site?
The last thing I want is my viewer wandering away from my site ><.
Below is the code I used on the Video holder object Sorry i forgot the tute i pasted from - but it worked thank you who ever you may be:
Security.allowDomain("www.youtube.com");
// This will hold the API player instance once it is initialized. var player:Object; var loader:Loader = new Loader();
I have a YouTube video embedded in my page. It is hidden (display:none). You need to click one of the video link buttons to display the video and play it. The links are defined like this:
It's fundamentally pretty simple! But here's the problem. since the video player is hidden, the flash object is not activated. So when I click a video link, the line ytplayer.style.display = 'block'; displays the video player, but it takes about about half a second for flash to load. During this time it cannot accept any method calls, such as the next line ytplayer.loadVideoById( id, 0, 'hd1080' );. Essentially, I have to click the link twice, once to load up the flash video player, the second time to actually load the video into the player.
I have a small ux problem with this embedded object: When scrolling the page up or down using the scroll-wheel of the mouse, it stops working when the mouse cursor is hovering over the video. Are there any html / css / param settings that I can modify to avoid this? See the site itself for a working example. I experience the problem both in Windows 7 64bit and Ubuntu 11.10 64bit so far.
I have a flash file that is in a div that is hidden when the page is loaded with the css property display:none. The div with the flash content is then shown at a later stage through javascript.
When will the flash file load? Ideally, I only want it to load when the div is shown.
This is driving me nuts folks. I've imported a video clip to my stage, added a skin for stop, play, pause etc. I test the Flash file using Control --> Test Movie and everything appears exactly as I want it to.
The problem is that when I upload the files to my server the embedded video clip does not appear, nor does the skin. Just a blank space
I'm using jQuery Autocomplete just as in this example: [URL] The problem is, the area where you see the Result box in that example - that's where my flash object is. So, when the autocomplete dropdown appears, most of the text is concealed by the flash object (which I can't move). How can I make the autocomplete text appear over the flash object (concealing its view rather than vice versa)?
I'm setting up a page that uses a flash menu to load html pages into a div container by the following call:
on (release){ getURL("javascript:getPage('test.html')"); }
The loading works fine, but some of my pages had specific jquery scripts and that's where I've struck out so far. I assumed all I needed to do was transfer the script importations, css stylesheets and the jquery functions to my main document, but it won't work.
I also tried importing the html as a the complete html, which works on it's own, but not when imported into the main document. Most recently I heard I should try shifting the jquery function calls to the end of the loaded document, to after the content, My scripts work, just not when imported, so I suppose my question is how can I make the main- and imported documents play nice with each other? What say you we make this a jump-start tutorial for all us noobs to reference?
I am having some troubles embedding videos in a jQuery dialog. It displays and plays all well but it is always in front of other dialogs. When I pass another dialog over the one with the video the video stays on top of everything.
Recently I have made a simple flash application that utilizes a webcam feed and an embedded chromeless youtube player within it. I now need to make custom controls around the player but would like to be able to do that in html/css and control it with js/jquery. While I can find material helping me control the chromeless player directly ( as in solo embedded and not part of another flash app ). My question is that since the chromless player is embedded INSIDE of another flash app ( say test.swf ) can I still access the player in there from js?
How to implement advanced video player (javascript/jquery/flash) for youtube videos that supports playlists? Is there some good open source script for this, that I could modify.
In my project at the moment I am using Nicola Hibbert's liteAccordion slider.I have it all set up and it's working nicely but the project needs to have a YouTube video on each of the slides.I have used the classic embed code from YouTube to get the desired result, In Firefox and other browsers it's all good, singing and dancing.In Chrome, tears stream down my face as it has totally broke.
I have stored an object template in a variable and then I'm adding the video links via jQuery. I'm doing this because eventually the links will be added into the object template via ajax. However, the video does not show up. I'm not sure what I'm doing wrong. The sample code is in action here: [URL]