Full Screen Streaming from YouTube or Vimeo

[#1]

I am trying to create a smooth scrolling article that has inline video. I would like the user to have the option to watch the video inline or play the video full screen. I have 2 questions:

1. I have seen on some of the other AEM apps that when you tap play it automatically launches the video in full screen mode. I can't figure out how they are doing this.

2. The full screen function works correctly on my iPad, but it freaks out my Android app when I tap the full screen button. By freaking out I mean it either says "Please install Flash or upgrade your browser" or the screen completely goes blank and the audio continues to play. Is this full screen video functionality not available on Android? And if not, can I somehow remove that button on Android only?

Oh by the way, I have tried inserting the embed html using the insert html command and also by creating a frame and using a web overlay. Also, I have tried the same video in YouTube and Vimeo.

[#2 · Accepted solution]

Regarding Android and iFrames and the full screen video control, this is a current limitation with the app. We've looked into it a bit but it's not yet enabled.

[#3]

There seem to be at least four things going on here, so simple answers are going to be difficult.

One variable is how you're building your article -- seems like you're using InDesign rather than HTML.

Within InDesign there are two ways to approach this: a video overlay or a web overlay -- each has different features.

An InDesign video overlay has the most control over playback (full screen option) and you can embed or stream the video resource. This is the option Benoit is covering above.

Once you go to code-based videos, more variables enter the experience. Streaming from a third party (YouTube/Vimeo) adds more variation as well. And then the interpretation of the HTML may be different for iOS versus Android. -- I suspect these last two aspects are what you're experiencing.

The "install Flash" problem is likely a poorly coded resource that's calling a Flash version of a resource rather than one encoded more neutrally.

I think the easiest route to a more consistent experience is if you used a video overlay, but that won't support a YouTube stream. OTOH you could embed or stream from your own https location if you have the video file.

Code based is going to have variable and somewhat more limited options. Variation may come from different OS support, and you won't have options like autoplay for the video.

HTH

[#4]

Thank you guys! That clears several things up for me.

[#5]

With the Android issue I have tried both using the full iframe code and only part of it and I get the same result with both.

I have seen other AEM apps, specifically Adobe Create that when you tap the play button on iOS it launches full screen and on Android it doesn't. But it also doesn't give you the full screen button on the Android video player. I'd be happy with this option except when I embed the code it gives me the full screen button on Android and iOS.

Also, it looks like the Adobe Create app uses a fake poster images with a fake play button, then when you tap the web overlay begins to play over the top of it. I'm not sure how that is working because when I try that the web overlay automatically jumps over the top of the poster image since they say to set the web overlay to AutoPlay.

At this point I'm trying everything. I know it shouldn't be this difficult, but I can't seem to get everything to work correctly on every device...

[#6]

1 - When creating InDesign article,  as in-app video, you can tick the "Play Full Screen" checkbox in the Video overlay panel

2 - In order to play an inline video from video hoster like Youtube or Vimeo, there is several option around the web describing javascript interaction to do what you want. Just ask Google with "Play Full screen video Youtube onclick"

Regarding you issue with Android asking for flash player, it might be related to the way you embed the code. Do you use the full iframe code provided by video hosting platform or do you use only part of it?