CODEWITHSUNDEEP
iosobjective-cyoutube
Rukshan
Rukshan

Reputation: 8066

Play Youtube video in a UIWebView without full screen

I would like to emebed a Youtube video in my app. But normal technique is, we embed a youtube video in a UIWebView and when user clicks, it automatically launches in a MPMoviePlayerController. But this launches in full screen. How to play this youtube video in a MPMoviePlayerController without going to full screen. I would like to display this in a half of the screen.

Upvotes: 9

Views: 17933

Answers (5)

Sasho
Sasho

Reputation: 3662

There are several ways to do that. In addition to setting:

videoView.allowsInlineMediaPlayback = YES;

The easiest and dirtiest way is to disable controls like this:

Method 1

Notice controls: 0

const player = new YT.Player("player", {
  width: "100%",
  height: "50%",
  videoId: "[your video id]",
  playerVars: {
    controls: 0,
    rel: 0,
    modestbranding: 1,
    html5: 1,
    showinfo: 0,
  },
});

Method 2

HTML Embedded iFrame code (notice the &controls=0 and/or &playsinline=1)

<iframe
  id="ytplayer"
  type="text/html"
  width="100%"
  src="http://www.youtube.com/[your_video_id]?autoplay=1&controls=0&playsinline=1&modestbranding=1&rel=0&showinfo=0&autohide=1&html5=1"
  webkit-playsinline
  frameborder="0"
></iframe>;

You only add &playsinline=1 (or playsinline:1 in the Javascript case next inside the playerVars) In this case, user will still be able to go full screen, but the player should start normally in the borders of your view.

I hope this helps.

Upvotes: 8

Lukesivi
Lukesivi

Reputation: 2226

I'm using a UIView which is defined as a YTPlayerView to play the video.

I followed this tutorial: YouTube Tutorial to Embed Video

I created a dictionary. I then added it to the videoId definition (which video I'm playing).

From YouTube Tutorial:

Replace the loadWithVideoId: call with this code:

OBJECTIVE-C

 NSDictionary *playerVars = @{
   @"playsinline" : @YES,
 };

[self.playerView loadWithVideoId:@"M7lc1UVf-VE" playerVars:playerVars];

Swift 2.1: 

   var playerVars = ["playsinline" : 1]

   videoId.loadWithVideoId(["videoId"], playerVars: playerVars)

This will disable the full screen when trying to play the video, and it will also allow the user to go full screen if they want.

Hope that helps someone.

Upvotes: 6

tfrank377
tfrank377

Reputation: 1858

There still doesn't seem to be a way to do this with MPMoviePlayerController, but the best workaround that uses a UIWebView is the YTPlayer open sourced by Youtube. You can get the source on Github, then you can just follow this tutorial.

I simply followed that tutorial and it works pretty well and is fairly customizable. Full screen plays in an AVFullScreenViewController which is a system standard, thus, it can be rotated for even better full screen viewing.

Upvotes: 0

Er Li
Er Li

Reputation: 199

Wrap the video in html5 file and add webkit-playsinline in the attribute of <video> tag. Then set webView.allowsInlineMediaPlayback = YES; That works perfect for me.

Upvotes: 2

bitmapdata.com
bitmapdata.com

Reputation: 9600

you set allowsinlinemediaplayback. but this feature on iPad. in iPhone not applicable. If you try play video with uiwebview on iPhone it will be played in full screen mode.

http://developer.apple.com/library/ios/#documentation/uikit/reference/UIWebView_Class/Reference/Reference.html

enter image description here

Upvotes: 4

Related Questions