Playing embedded videos on mobile devices

My website is a showcase for my animation work. I have a lot of videos from various sources: from disk, from Vimeo, YouTube and from the producer’s website. I don’t have any choices about whether I embed or not. I have them come up in popups, because I would rather people stay on my site and are not sent to another website, even if as a different page. Everything seems to work reasonably well, except on a phone. If people do not first click on the full screen icon before playing, it will play inside the browser, and only part of the screen can bee seen, and the full screen icon is not visible. Any suggestions? Maybe another method without popups?



(By the way, I changed the bad page description, but it keeps showing up anyways).

I think you may be confusing what the term ‘Embed’ means in this context. Although you may think the video is being embedded into your site - it isn’t - it’s only the player that is being embedded into the page. The video is still being served up by YouTube from their website and is just displaying in your webpage.

That said, the best option is to use the ‘Still + Embed in Lightbox’ option. It’s easier to deal with than popups. Essentially, you place the video container on the page and size it as a thumbnail link. When someone clicks the thumbnail. the video opens in an almost full screen lightbox, so there isn’t really a need for people to use the full screen option in the YouTube player (although they could if they wished).

Here is what the option looks like in the style panel:

Popups are best reserved for situations where, for maybe aesthetic reasons, you don’t want to display what looks like videos on your web page. Instead, you may want to show text links or buttons on the page, but when clicked, the video appears in a popup. However, if you’re OK with showing video thumbnails on your page, use the lightbox option instead.

Thank you. I’ll try nopt having the popups. The popups are because there is a lot of extra information that I would like to include with each viceo, and I don’t want to clutter the page with all that extra stuff. I don’t think we can have rollovers with sparkle, so I could have the info come up when rolling over the image. But the other problem is, for most of the videos, I do not have the option of Still + embed. It’s greyed out.

I just tried it without the popup, with Still + embed in lightbox, and it is fine on the computer, but same problem on the phone. My browser window is at the top and cuts off part of the image. Navigation is a problem, because I can move the image up to fill the screen, but then the “X” to close the window is off screen when I stop, so I have to move the image back down to find the “x” to close the window.

OK one more thing. Still and embed works fine on the phone and my browser window does not stay on the screen. But on the computer still + embed the image stays small unless it’s still + embed in lightbox. So I think what I have to do is have two device-specific versions.

@Poodleman, have you introduced your 320 device?
You need to manually introduce your 320 device (mobile portrait) and rearrange your elements to make it properly viable on mobile.

Yes, it’s all ben rearranged. The problem is that the videos play under the browser window. I think I have a solution, using a different version of the video for each device, but I’ll need some time to get that done.

Have you got a URL that we can take a quick look at?..

I have not made the changes yet. It will take some time. Maybe tomorrow.

Yeah a couple of your videos isn’t scaling properly in the LightBox.
It might be best if you send your project over to @duncan at feedback@sparkleapp.com giving him an explanation what you have done and what you see going wrong.