AVPlayer get rid of black bars/background at top & bottom (Swift)

Question

Quick question, does anybody know how i can get rid of the black bars at the top and bottom of my video? I just started using AVPlayer and i'm just removing codes here and there in attempt to remove the black layers. Appreciate those who can help me, Thanks!

UIViewController

import UIKit
import AVKit
import AVFoundation
private var looper: AVPlayerLooper?

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        let path = Bundle.main.path(forResource: "Innie-Kiss", ofType:"mp4")
        let player = AVQueuePlayer(url: URL(fileURLWithPath: path!))
        looper = AVPlayerLooper(player: player, templateItem: AVPlayerItem(asset: AVAsset(url: URL(fileURLWithPath: path!))))
        let controller = AVPlayerViewController()
        controller.player = player
        let screenSize = UIScreen.main.bounds.size
        let videoFrame = CGRect(x: 0, y: 200, width: screenSize.width, height: (screenSize.height - 130) / 2)
        controller.view.frame = videoFrame
        self.view.addSubview(controller.view)
        player.play()
    }

}

Blackberry

Try setting the background color of controller.view to white or transparent – Cumulonimbus

Hi sweeper, sadly it doesn't change at all – Blackberry

I am ~90% sure those are actually from the video file's aspect ratio and not the AVPlayer – Sprig

Answer 1

You need to set the videoGravity of the AVLayer. The default value is .resizeAspect which will preserve the aspect ratio with black bars on top/bottom or left/right. What you want is .resize

The AVLayer you need to set the videoGravity on is the layer property of your AVPlayer.

see this for more info: https://developer.apple.com/documentation/avfoundation/avplayerlayer/1388915-videogravity

Scornik

But .resize stretches the video – Diode

For me, the .resizeAspect does what I want it to do. Getting rid of black background was changing the background color for the AVPlayerViewController itself: #37205258 – Diode

You didn't get rid of it then. You just changed the color, but the padding is still present 🤦🏼‍♂️ – Kodok

Answer 2

#import AVKit

var playerController = AVPlayerViewController()
playerController.videoGravity = .resizeAspect
 /*playerController.videoGravity = .resizeAspectFill*/
playerController.view.backgroundColor = UIColor.white //set color as per super or custom view.

Note: If you set the videoGravity of the AVPlayerViewController. The default value is .resizeAspect then it is possible to visibility of black color(default) in background if you wants this color would similar to your super view's color then you must set superview's or custom view's color to your playercontroller's view background color.

*Example:Suppose super view's or custom view's background color is white then playerController view's background color must be set as playerController.view.backgroundColor = UIColor.white *

Note :playerController's backgroundColor should not be set as UIColor.white ,always. It must me set as super view' background color.

If you set playerController.videoGravity = .resizeAspectFill then it will fill the player content to super view or custom view, here also no black color would be shown. So choose either .resizeAspect  or resizeAspectFill as per your requirements.

Danette

Hello! While this code may solve the question, including an explanation of how and why this solves the problem would really help to improve the quality of your post, and probably result in more up-votes. Remember that you are answering the question for readers in the future, not just the person asking now. Please edit your answer to add explanations and give an indication of what limitations and assumptions apply. – Maclaine

Hello! I have added explanation why? and when? code will used. Thank you – Danette

Answer 3

I added some vertical padding on the player, which got rid of the top and bottom black borders.

    VideoPlayer(player: player)
        .onAppear() {
            player.play()
        }
        .padding(.vertical, 25)

Blanket