This problem only occurs on Chrome.
I have a embed youtube player on my website which is hidden and located behind my main design. Once I show
$("#trailer").show();
$("#flyer").hide();
then hide the player again :
$("#trailer").hide();
$("#flyer").show();
my main design acts weird : whenever I move my mouse over a link/button/anything actionable it displays a portion of the hidden player.
Here is a not-working example : http://movies.expaflyr.com/68721
(Click on the poster then on "Watch Trailer", close it and mouse-overs will cause bugs)
I don't know how to fix this. Does anyone understand what's was going on?
Related
I've been trying to work this out for a while but I keep coming to a dead end.
Scenario:
I have a youtube video embedded in an iframe on my page.
I am able to play the video just fine on my Mac when using voiceover however on my iPhone 6 and an iPad, when I use VoiceOver and the swipe gestures to move through the page and attempt to play the video, the viewport scrolls to the top of the page when focus reaches VoiceOver.
Here is a gif that is currently happening.
Incidentally, this problem doesn't occur when the youtube video is one of the first items on the page, it only happens when the video is below the fold as it were. The current has JS to make the heigh of all the divs the same.
I should mention I have seen this previous question and indeed attempted to implement it but the issue was still occurring.
Any help or advice would be appreciated.
This is a bug that I have managed to fix by brute force, but I don't understand why the solution worked.
The problem was that embedded YouTube videos weren't working on a particular (responsive) site on iPad (tested in iOS7) in landscape view. I managed to narrow it down to a particular CSS rule that was showing a search input in the header when the browser was wide enough, so it would show in an iPad's landscape view but not in its portrait view.
After a little more brute force fiddling, I found that removing the type="search" from the input tag (which causes it to fall back to the default type="text") would fix the problem. None of my searches have come up with an explanation for why this works though, or even anyone else experiencing the same thing.
Some more details on the bug
The site works by showing an image at first, which would be replaced via JavaScript with the YouTube iframe when clicked. After this first click, it would autoplay on desktop browsers, and on the iPad it would load the video but wouldn't play until the user presses it again.
If the type="search" input was visible (display: block;), then tapping on the embedded video would not cause it to play; there would be no visible response to the tap. If I zoomed in and tapped on the controls at the top, like the name of the video, I could see them being underlined, and testing showed that there was no element covering the iframe and intercepting events.
Strangely, tapping on the very edge of the right hand side of the iframe would cause the video to start playing correctly. Otherwise, changing the iPad to portrait view (causing the search input to be hidden via CSS) would enable the iframe to be clicked in order to start the video playing. After that first click, all the video controls would work regardless of whether or not the search input was showing.
Just experienced this first-hand myself and wanted to add my kudos for you having written this up. Your SO question, even without an answer, pointed me in the right direction.
In my case it was nothing to do with Youtube. I had a page generated by Drupal in a large-ish site, in which the site-wide search mechanism used an auto-complete drupal module which had type="search" as the main input's type.
In IOS, users reported that Facebook, Twitter and Google Plus's respective "like" buttons all didn't work, along with a much larger angular app embedded in the page. They all used iframes and none of them seemed to respond to clicks.
Changing this seemingly innocuous, unrelated input's type from search to text solved this problem immediately.
Baffling.
I am trying to add custom controls to an embeded YouTube player. I am overlaying a html menu. However, when a user clicks on the full screen button within YouTube my html menu will no longer be available on the larger player.
There are two possible solutions I foresee.
First, if I could figure out the element that is generated for the fullscreen player then I could overlay controls on this.
Second, if I could grab the fullscreen click event I could use javascript to get the current available window demenisions an scale the video to the available realestate.
I found this: https://developer.mozilla.org/en-US/docs/DOM/Using_fullscreen_mode?redirectlocale=en-US&redirectslug=DOM%2FUsing_full-screen_mode
However, I am not sure if it would work in most browsers and second it looks like it is in the test phase.
The answers I am looking for are:
What is the element or how can I find the element that is generated for the fullscreen player?
Or
How can I capture the click event for fullscreen?
Do you want to capture the click anywhere on the screen or on a link in a menu?
If you want to capture the click on a link on a menu I think this plugin can be useful as an example:
http://www.seanmccambridge.com/tubular/
https://code.google.com/p/jquery-tubular/source/browse/trunk/js/jquery.tubular.1.0.js
I am using JWPlayer to embed several YouTube videos on a web site. In the bottom right hand corner, there's the usual YouTube logo.
The text/tooltip that appears on hover is getting clipped by the video or the video's container.
Inspecting all of the parent elements, I'm not seeing anything that's set to overflow:hidden. Anyone run into this, or better yet, have a solution to either move the tooltip, or make it so it is not clipped by the video,container or object?
Edit: I've got it live now, so there is an example of what's happening:
http://www.copycei.com/#home
If you start playing a video from the home page, hover over the ghosted YouTube logo in the bottom right hand corner, and you'll see the clipped tooltip. Was really hoping I could target the id/class of that bit and just position it slightly to the left, but can't seem to inspect and target it in Chrome. Any help would be appreciated.
LongTailVideo (makers of JW Player) have filed this as an actual bug with the Google API used for embedding YouTube video:
https://code.google.com/p/gdata-issues/issues/detail?can=2&start=0&num=100&q=&colspec=API%20ID%20Type%20Status%20Priority%20Stars%20Summary&groupby=&sort=&id=2899
Looks like there's not a solution to this as of now.
I'm embedding windows media player in a windows sidebar gadget.
As soon as I start the player (even if i stop it after doing so), hitting WIN+D ("Show Desktop") hides my gadget (all other gadgets stay visible).
What's causing this issue and is there a way to fix this annoying behaviour?
The problem occurs both with a media player embedded in the HTML and with one created with new ActiveXObject(...).
As I was looking for an solution to this question (on StackOverflow). I found that 'styling' media player instance
<object id="mediaPlayer" classid="clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6" type="application/x-oleobject"></object>
with this CSS
#mediaPlayer {
position: absolute;
z-index: -1;
}
was all that it took to have it not disappearing.
EDIT:
'Unfortunately' this did fix it, except when you start the player once 'touched' the Gadget would disappear like before.
I did find a way to 'fix' it. It appears not to happen when you use video in the player. It doesn't care if it's viewable. So you could consider finding a video stream for the audio you want to hear. In my case: I wanted to build a Gadget for the dutch radio station 3FM, and include a video stream in the the end.
This was a challenge itself: nothing more annoying than a a-sync video/audio stream. So i had to really 'think outside the box': the flyout consists only of the station's logo. The gadget itself is 'viewable' within the specified range. Except the video stream-container-div is hidden until requested to view and I invoke the gadget's flyout. So in the end: I fixed it, but it's no solution to the original question...
For those interested in the solution: 3FM-2011.gadget download