How to play YouTube videos directly on iOS app

background

In my work, I had a requirement that "I used to play YouTube videos via a web page that once embedded the video, but I want to embed the video directly on the native screen", so I took a quick look at it. ..

From the conclusion, it seems that there is no native SDK etc., and it seems that it will be a method to play the embedded video using WebView.

Although there is an officially thin helper, it is Objective-C, and I just want to play it for the time being, so I will implement it myself. https://developers.google.com/youtube/v3/guides/ios_youtube_helper?hl=ja

Realization method

As an implementation method, just place a WebView laid out so that it is the same size as the video

Place the WebView like this. Since the video is 16: 9, WebView should also be 16: 9. スクリーンショット 2020-12-19 19.18.21.png

I wrote it loosely, but the points are as follows

--Style specification so that you can change the video size responsively --If you do not specify the viewport, the embed video will be for PC and it will be difficult to operate. --Bounce is turned off in scrollView, but it may be better to control enlargement/reduction etc.


import UIKit
import WebKit

class ViewController: UIViewController {

    @IBOutlet weak var webView: WKWebView! {
        didSet {
            webView.scrollView.bounces = false
        }
    }
    
    let vid = "M7lc1UVf-VE" // videoID
    lazy var htmlString = """
<!DOCTYPE html>
<html>
<head>
<meta charset=“UTF-8”>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
body {
    margin: 0px;
}
.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}
</style>
</head>
<div class="youtube">
<iframe width="375" height="210" src="https://www.youtube.com/embed/\(vid)" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</html>
"""
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        webView.loadHTMLString(htmlString, baseURL: nil)
    }
}

It's rough, but I was able to play it like that for the time being.

sample

https://github.com/satorun/EmbedYouTubeVideos/tree/main

environment

Recommended Posts

How to play YouTube videos directly on iOS app
How to embed youtube videos using iframe tags (haml)
How to deploy on heroku
[iOS] How to read Carthage
How to deploy a simple Java Servlet app on Heroku
[iOS] [Objective-C] How to update a widget from an Objective-C app
How to deploy a kotlin (java) app on AWS fargate
[IOS14] How to get Data type image data directly from PHPickerViewController?
How to deploy jQuery on Rails
How to "hollow" View on Android
[Java] How to update Java on Windows
How to install ImageMagick on Windows 10
How to use Ruby on Rails
How to deploy Bootstrap on Rails
How to run JavaFX on Docker
How to use Bio-Formats on Ubuntu 20.04
How to install MariaDB 10.4 on CentOS 8
Rails on Tiles (how to write)
How to install WildFly on Ubuntu 18.04
How to build vim on Ubuntu 20.04
How to solve the problem that notification cannot be requested on iOS14
How to check Java installed on Mac
A memorandum on how to use Eclipse
How to adjustTextPosition with iOS Keyboard Extension
How to redo a deployment on Heroku
How to use Apache Derby on Eclipse
How to change app name in rails
How to install Play Framework 2.6 for Mac
[Ruby on Rails] How to use CarrierWave
Easy way to set iOS app icon
How to use BootStrap with Play Framework
How to detect microphone conflicts on Android
How to install Eclipse (Photon) on Mac
How to publish an application on Heroku
How to install production Metabase on Ubuntu
[IOS] How to get data from DynamoDB
How to switch Java versions on Mac
How to install beta php8.0 on CentOS8
How to change the timezone on Ubuntu
[Ruby on Rails] How to use redirect_to
[Ruby on Rails] How to use kaminari
How to install kafkacat on Amazon Linux2
[Rails] How to use video_tag to display videos
Needed for iOS 14? How to set NSUserTrackingUsageDescription
How to send push notifications on AWS
How to assemble JSON directly in Jackson
Allows Youtube autoplay on Cordova's Android app
I want to play a GIF image on the Andorid app (Java, Kotlin)
[Ruby on Rails] How to display error messages
How to deploy a container on AWS Lambda
How to configure ubuntu to be used on GCP
How to add / remove Ruby on Rails columns
How to make rbenv recognize OpenSSL on WSL
How to play audio and music using javascript
How to add sound in the app (swift)
How to install NVIDIA driver on Ubuntu 18.04 (Note)
[Swift] How to link the app with Firebase
Build a streaming server on your iOS app
Notes on how to use each JUnit Rule
Note how to rollback Mysql deployed on Heroku
How to install multiple JDKs on Ubuntu 18.04 LTS