Animate video UIView to go full screen like YouTube App

Question

I have a view controller that has a UIView that I call playerView. In playerView, I use an AVLayer and AVPlayerLayer to show the user a video. Image the Youtube app when you first click on any video.

How do I manipulate the frame of this playerView so that it can take up the entire screen. (Go full screen)

This is the current frame:

 //16 x 9 is the aspect ratio of all HD videos
 let height = view.frame.width * 9 / 16
 let playerFrame = CGRect(x: 0, y: 0, width: view.frame.width, height: height)    
 playerView.frame = videoPlayerFrame

I was testing around in the YouTube app and their app only supports Portrait orientation (just like mine) due to how the animation of a video going full screen looks. How can I do this at the the tap of a button and even further when the user holds the device horizontally?

UIView.animate(withDuration: 0.5, delay: 0, usingSpringWithDamping: 1, initialSpringVelocity: 1, options: .curveEaseOut, animations: {

   self.playerView.frame = ?

}, completion: nil)

Edit: Tried this but it doesn't really work how I want it... it doesn't take up the whole screen

UIView.animate(withDuration: 0.8, delay: 0, usingSpringWithDamping: 1, initialSpringVelocity: 1, options: .curveEaseOut, animations: {

   self.playerView.frame = CGRect(x: 0, y: 0, width: self.view.frame.height, height: self.view.frame.width)
   self.playerView.transform = CGAffineTransform(rotationAngle: CGFloat(Double.pi / 2))

}, completion: nil)

Answer 1

I figured it out.

I create a global variable called isExpanded that will be set to true when we're in full screen mode. Also, I create a CGPoint variable called videoPlayerViewCenter so I can save the center before going full screen so I can set it again when going back to small screen.

This is the code that gets called when the user wants to go full screen

func fullScreenTapped(sender: vVideoPlayer) {

        if !isExpanded {
            //Expand the video
            UIView.animate(withDuration: 0.8, delay: 0, usingSpringWithDamping: 1, initialSpringVelocity: 1, options: .curveEaseOut, animations: {

                self.videoPlayerViewCenter = self.videoPlayerView.center

                self.videoPlayerView.frame = CGRect(x: 0, y: 0, width: self.view.frame.height, height: self.view.frame.width)
                self.videoPlayerView.center = self.view.center
                self.videoPlayerView.transform = CGAffineTransform(rotationAngle: CGFloat(Double.pi / 2))
                self.videoPlayerView.layoutSubviews()

            }, completion: nil)
        } else {
            //Shrink the video again

            UIView.animate(withDuration: 0.8, delay: 0, usingSpringWithDamping: 1, initialSpringVelocity: 1, options: .curveEaseOut, animations: {

                //16 x 9 is the aspect ratio of all HD videos

                self.videoPlayerView.transform = CGAffineTransform.identity
                self.videoPlayerView.center = self.videoPlayerViewCenter

                let height = self.view.frame.width * 9 / 16
                let videoPlayerFrame = CGRect(x: 0, y: 0, width: self.view.frame.width, height: height)
                self.videoPlayerView.frame = videoPlayerFrame

                self.videoPlayerView.layoutSubviews()

            }, completion: nil)
        }

        isExpanded = !isExpanded
    }

To expand the video, I save the center in my global CGPoint variable and then set the frame. Then, I set the center and do a 90 degree turn using CGAffineTransform.

To shrink the video again, I basically set the settings to how they were before. (The order in which things are done is very important)

Another thing that's also very important is to override your layoutSubviews method in your videoPlayerView to be like this:

override func layoutSubviews() {
        super.layoutSubviews()
        self.playerLayer?.frame = self.bounds
    }

This will make it so your playerLayer adjusts its frame as the view is getting bigger.