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.
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.
I can't seem to find any documentation anywhere that states how you can display your overlay logo with link when embedding your video?
After attempting to copy the URL format used on the overlay settings page, however it always reverted back to the DailyMotion logo.
http://www.dailymotion.com/embed/video/<video_id>?
GK_PV5=1&
api=postMessage&
apiKey=<apiKey>&
origin=<origin>&
ui-watermark_link_url=<link_url>&
ui-watermark_url=<watermark_url>
To clarify, is the logo only displayed when the video is shown on the DailyMotion website, or am I doing something wrong?
To put on overlay on your Dailymotion videos, you don't need any code, it's only a setting in the overlay settings page you mention: http://www.dailymotion.com/settings/logooverlay
You need to have monetization enabled to access this feature.
Basically, you only have to upload your logo on this page (when logged) and this will add a logo to the bottom right corner of your videos (whether onsite or in your embeds).
Read more at https://faq.dailymotion.com/hc/en-us/articles/207322227-Logo-overlay
I have a site (which is only viewed using Internet Explorer 7) that is made up of 5 sections and in section 2 I am currently using Vimeo to embed a video. The requirement is that the user has to watch all of it before proceeding to the next section. In order to achieve this I have used event listeners which only activate the ‘Next’ button to proceed when all of the video has been watched (Works Great)
Another requirement is for users to be able to play the video in full screen but the problem I have using Vimeo is that it does not support the option to hide the progress bar when a video is playing in full screen, this allows the user to skip the video. After researching around and contacting Vimeo support I can confirm that hiding the progress bar can only be achieved when viewing the video in standard mode when you have subscribed to the pro account (which I have).
I looked into targeting the CSS classes within the iFrame, and setting a display none value on the controls div but this is something that can’t be done.
I have looked at using YouTube as an alternative and you are able to hide the progress bar in full screen using this markup
<iframe width="560" height="315" src="https://www.youtube.com/embed/C0DPdy98e4c?rel=0&controls=0&showinfo=0?&fullscreen=1" frameborder="0" allowfullscreen=1></iframe>
I’ve done some reading on using the YouTube Player API Reference for iframe Embeds (https://developers.google.com/youtube/iframe_api_reference) but it says that one of the requirements is that the user's browser must support the HTML5 postMessage feature - INTERNET EXPLORER 7 DOES NOT SUPPORT IT :(
Could anyone suggest how I can achieve this, either by hiding the progress bar using vimeo in full screen or by implementing the youTube Iframe API to work with IE7?
Cheers
Paul
I don't see a parameter to remove the controls in a Vimeo video on their page on embedding. Also, the Vimeo FAQs say that the control bar gets hidden on an embedded video when it's less than a specified number of pixels wide.
You might have to do some sneaky CSS styling stuff instead. I did manage to find an article on hiding controls on an HTML5 video when viewing it fullscreen, but it said that IE does not support the full-screen API, so I'm not entirely sure what you're trying to do is actually possible on IE.
<iframe src="snip?showinfo=0&controls=0&rel=0"></iframe>
JSFiddle. All controls, including the title, are hidden before and during playback, but when the video ends, the title appears, ignoring the showinfo setting. Is this the intended behavior?
Not worth asking another question. Is it possible to hide the YouTube watermark with this setup?
To answer the first question, this is the intended behavior. YouTube wants the the person on the other end to click on more videos.
As for the second, what you're looking for is the modestbranding=1 parameter. Unfortunately you have to use that parameter first and you can't use it with showinfo=0. I guess YouTube has to get some type of credit right? There may be a tweak out there or an unlisted parameter. I'll give it a few more shots.
Also here you'll find an explanation from Brian Glick at YouTube for this functionality.
I know I'm late, but since this question was never answered...
The title only shows up when you're using the HTML5 playback if enabled and when the video is embedded via iframe. The Flash playback does not show the title in the end.
You can hide/cover up the title using the YouTube iFrame API with if (event.data == YT.PlayerState.ENDED). Be aware though, that YouTube doesn't allow to you to cover up too much. As long as there is a visible (no right-click) link-back to YouTube like the watermark, the logo in the controls or the clickable title, you should be fine.
I have a mobile site with a youtube video embedded in a slideshow with left and right arrows overlaying the iframe. The arrows work fine before I click play. They are visible and clickable. Then I play the video and it goes full screen. When I click done and close it, the arrows are still visible on top but no longer clickable.
I have tried messing around with preserve-3d and adding the wmode=opaque to the src and iframe tag with no luck.
I am not having this problem with vimeo embeds, the arrows work before and after they play full screen.