0

My question: Is iOS the only OS that will play an embedded Youtube video at fullscreen by default? If so, is it possible to safely display a youtube video at fullscreen (or close) in a non-iOs device?

The situation is that I have a group of webpages that contain a youtube video on each page. The idea is to keep the User inside the group of webpages (until they "Exit" out of the group), so therefore I am not showing any related videos, and the only other links on the page are links to the other pages within the group (and the "Exit" button).

The problem is that I can't deliver a consistent cross device experience. As far as I can tell, the only way to play a Youtube video fullscreen is to the open up the Youtube App. I do not want to do that because I don't want to break the experience of my quasi-app.

I found this thread, which seemed hopeful, but linking to a watch_popup url triggers the Youtube App on Droid devices.

I could embed the video using the Youtube API, then display that video in a modal when the user wants to play the video. But doing this disturbs the experience on iOS devices since the video already plays at fullscreen by default.

From my perspective, it seems I need to detect the userAgent, and if the userAgent is Not iOS, then display video in a modal window. Detecting userAgent seems so 2001, so is there a better way?

Community
  • 1
  • 1
Jeff Wilkerson
  • 376
  • 2
  • 18

1 Answers1

1

We ran into a similar situation with IOS except we wanted it to be a full screen experience and we only wanted it to be a one click play.

By default, if you have an inline video in IOS, you need to click the video, then it opens up in full screen, then you need to click it again to make it play. Too many steps.

To make the experience consistent I did the following.

Use a placeholder image for the video, but load the video via youtube api over the placeholder image with the opacity set to 0.

Set it so that the on click event resizes, repositions, and adjusts the opacity to 1 for a full screen modal and auto plays.

var done = false;
function onPlayerStateChange(event) {
  if (event.data == YT.PlayerState.PLAYING && !done) {
  $('.mobile-video-container').css('opacity', 1);
  $('.page-container').addClass('modal-background');
 }
}

function stopVideo() {
 player.stopVideo();
}
$('.page-container').click(function(){
  $('.mobile-video-container').css('opacity', 0);
  $('.page-container').removeClass('modal-background');
  player.stopVideo();
});
rachel
  • 157
  • 8