When I'm embedding youtube video in my mobile page, it brings a lot of scrolling issues in iPhone(I guess, it will same problems in other devices too). Users just can't scroll page when their tap on the video itself.
Here is code I'm used for embedding
<iframe width="270" height="152" frameborder="0" src="http://www.youtube.com/embed/nBJCbUMHna4?rel=0"></iframe>
Can we solve this problem anyway? For example, can we show only thumbnail image of video and play it when user taps on that image. I think the scrolling problem will disappear when there will be image instead of iframe in the page.
I've tried to use html5 version of youtube video, but seems IPhone still renders video in flash way.
<iframe width="270" height="152" frameborder="0" src="http://www.youtube.com/embed/nBJCbUMHna4?rel=0&html5=True"></iframe>
The below snippet appears to do the trick without any JavaScript trickery. At the same time this also ensures that you get the nice scrolling momentum on iOS.
*{
-webkit-overflow-scrolling: touch;
}
I've exactly the same issue on my site, this is not the case in the google blog.
I precise that it doesn't scroll the iframe content, it scroll the safari's viewport.
I've try to replace the iframe by an img, no scrolling problem but the video now open in the youtube app...
I'm interested by a solution/workaround
for image solution
var frame = $('#youtubeFrame');
if ( mobileCheck )
{
frame.replaceWith('<img id="imgYoutubeFrame"/>');
$.getJSON("http://gdata.youtube.com/feeds/api/videos/"+youtubes[currentVideo]+"?v=2&alt=jsonc&callback=?", function(json){
$("#imgYoutubeFrame").attr("src", json.data.thumbnail.hqDefault);
});
}
We are having this issue with Vimeo on our mobile site as well. It took us a while to even figure out that users were having the issue.
One work around that we are checking out is to add a div layer on top of the video that allows users to scroll as normal and also acts as a custom play button that would distinguish between a scroll and a tap, or perhaps require a double tap to play the video. There is good step by step info on the general principal of how to do that here (https://css-tricks.com/play-button-youtube-and-vimeo-api/). I'd love to hear if others have found a better option to fix this.
As far as i know you cant have scrolling iFrames on iOS devices
since the scrolling is done with a touch/sliding/gesture
it will scroll the whole page...ie: if you try to scroll
the contents in a iFrame it will scroll the whole page...so the iFrame
will move away with it.
So you could look more in the direction where you dont use scrolling frames,
or make shure theres no need to scroll (content is size of frame it is in),
or use a fancybox-type-of thing where the content is on top instead of in a frame,
or have 2 (jquery) buttons that when pressed do the up/dwn scrolling (instead of a scrollbar),
or have a link which opens the player in a new page,
or the standard way where video opens directly in the iOS player itself (QT/Safari).
Related
I'm developing a web app whose main purpose is streaming dancing videos and I'm facing this problem just in chrome mobile, it works flawlessly in firefox mobile, and in every other desktop browser.
The thing is I need to be able to flip an html5 video element and it works... well, it works until I go fullscreen, then it stays for a few seconds and reverts to the original video (not flipped).
I'm using the css "transform: scaleY(-1)" property.
I've tried setting this property to the video tag, to an upper div, within the video tag and the div which requests fullscreen. And to the div requesting the full screen with no success. If I set scale(); to any positive number between 0 and 1, it seems to do the trick but it doesn't work with negative numbers.
I'm aware of the UA css :not(:root):-webkit-full-screen {transform: none !important}, but it doesn't seem to be the problem. I would rather say it's more related to the way chrome handles video in fullscreen mode.
Any help would be appreciated. If I can't make it work, I'll have to provide another stream with the mirrored version of each video.
Thanks in advance, If you need any examples don't hesitate on asking.
I am searching for a free javascript image slider, which allows me to go fullscreen like on the youtube player or any other video player. Unfortunately I can just find sliders, which allow me to use the whole browser window, but they do not hide the windows explorer bar and the browsers bar.
I would be very pleasent for any advice.
With regards,
Andrej
Actually you will not find a slider that does that automatically ... even if it has a full screen mood included ... still wouldn't hid the browser windows explorer.
If this feature is a must for you, you may search for a JavaScript/JQuery code that manipulates the window attributes (ex: width,height, ... etc).
There's a thread on Stackoverflow that discuss the same issue ... you may check this link
Vide.js will be helpful for making full screen video player.
If you are making an image slider then go for any framework and choose sliders. In CSS make width 100% height:100% and overflow: hidden to prevent scrollbar.
On my website, I embedded a Youtube video with this simple code:
<iframe src="//www.youtube.com/embed/bpqTiwfzqdo" width="640" height="360" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
The results is the video that is at the bottom of the page here:
http://www.rpginsider.com/child-of-light-releases/
When in Chrome and I press the full screen button on that video, the video does not go full screen. Instead my whole browser goes full screen (as if I pressed F11) but not the video.
However, when I use Explorer or Firefox, full screen works just fine. So obviously I'm doing something wrong. Any help would be appreciated.
This issue can be caused by CSS Animations. If any of the iframe's ancestor elements is animated by CSS3 Animations with an (-webkit-)animation-fill-mode property set to "forwards" or "both", the video isn't set to fullscreen on Chrome.
try to remove
="allowfullscreen"
so past this one
<iframe width="640" height="360" src="//www.youtube.com/embed/bpqTiwfzqdo" frameborder="0" allowfullscreen></iframe>
This is not exactly what is happening with my embed, fullscreen works fine in IE and Firefox but the video is being pulled up and to the left in Chrome because I have transform translate styling applied to the iframe which is affecting the video in fullscreen mode, but at the same time I also have a position absolute applied to the iframe with a top of 50% which is not affecting the iframe in fullscreen mode.
I'm going to listen for fullscreen changes on the iframe and remove the translate css on the iframe and add it back when going back to normal. How can I detect when an iFrame goes fullscreen?
World's not perfect, the fullscreen api is not playing well with me. Scraping that idea, removing the translate css altogether and going back to negative top and left margins half the iframe's dimensions. Fullscreen works fine in chrome that way.
Found a solution. I had the same issue.
<div class="blog-post blog-large fadeInLeft">
My youtube iframe was in a card and that card had an css animation. Deleting that animation (fadeInLeft) solved the problem completely.
Try this with css:
embed,
iframe,
object {
max-width: 100%!important;
max-height: 100%!important;
}
This might help someone. I have just faced exactly the same issue in 2021 on Safari. The full screen button on the Youtube iframe will make the whole web page display full screen instead of the actual video. The problem was also related to CSS animation being applied to the parent element of the iframe so removing animation solved the problem.
I have a Chrome extension that inserts a menu into the page, but whenever any flash or html5 video player goes full screen, anything outside of the video player is invisible.
Could I have two objects in full screen at the same time (one over the other), or is there another way to do this? I would rather not have to insert the html specifically into different places on different websites, because of the large variety of existing video players. The solution should be universal for all video players.
EDIT:
Since then, a lot of the web has moved to using html5 instead of flash, so this has become a very possible thing to do on almost all websites.
Here was the code I ended up writing and using. Hopefully this will help someone:
document.addEventListener("webkitfullscreenchange", function(){//Whenever an element becomes or stops being in full screen
//first, grab the page's fullscreenElement
var fse = document.fullscreenElement||document.mozFullScreenElement||document.webkitFullscreenElement||document.msFullscreenElement;
if(fse){//if there is a fullscreened element
fse.appendChild(menu);//append the menu inside the fullscreened element
}else{//if nothing is in full screen
if(window.self !== window.top){//if we are in an iframe
menu.remove();//hide menu if we are in an iframe
}else{//if we arn't in an iframe
document.body.insertBefore(menu, document.body.firstChild);//show menu
}
}
});
This is not likely to be possible. The video player fullscreen implementation takes over the entire screen; you do not have a browser window to overlay on anymore.
It's not the same as going fullscreen in your browser, where you still have the normal browser window to work with.
edit: to expand further;
With any video player using Flash, this is absolutely not possible, because you have no chance of any HTML elements to overlay onto; the fullscreen is handled by flash itself, and you can't do anything with that.
With HTML5, from my testing it also seems impossible. I went to this sample page, edited the HTML in the dev tools to try inserting a div inside the video element, but it won't render.
If you had control over the pages, it might be possible to fullscreen a container div instead of the video itself, and then achieve what you want, but since you can't control the pages in question, that likely won't help you at all (unless you wanted to try replacing IDs/etc in-page, but even that wouldn't guarantee success; if the page JS already had handles on the relevant elements, replacing IDs wouldn't update those)
Unfortunately as #Collin Grady mentioned this is not possible since the browser takes care when you play a fullscreen video.
You can still simulate full screen tho! You could modify the size of the video to adjust to the size of the screen (or whatever size you require). By doing this you still have control on your elements and can show your menu on top of the video.
There is an article in CSS Tricks that could guide you on how to modify the dimensions of a youtube video. The writer of the article wrote a jQuery plugin too called FitVids.JS
By Simulating full screen you could show what you want on top.
I hope this helps
I need to embed a YouTube player with the following attributes:
Must not allow users to go forward or back (no progress bar)
Must have access to player events (player disappears and message is displayed when video ends)
Must be able to go fullscreen and back to normal at user's request.
I was hoping the JS API would allow me to do this easily, but apparently Flash security makes it so the user has to click somewhere within the flash element itself in order to use Flash to go fullscreen.
As a workaround, right now I'm using the HTML5 fullscreen API as seen here: http://blogs.sitepointstatic.com/examples/tech/full-screen/index.html
But this causes cross-browser funkiness and even appears to be messing with my player events (the video stops playing and goes back to the beginning when I requestFullScreen). I could try to work this angle some more but I'm praying there's an easier way.
I would love if there was some way to customize the embedded YouTube player to remove the progress bar but still allow fullscreen w/ Flash, since it's just so much more seamless. Is this even possible?
Your users should still be able to fullscreen by double clicking the video. The HTML5 fullscreen api should work fine, but if you're having issues where the flash plugin in re-initializing I would do two things. First report the bugs to the browser vendors so they can be fixed. Two listen for onYouTubePlayerReady a second time and add your event listeners again. Then seek to the point in the video they were at before going fullscreen.