Как установить высоту и ширину iFrame так же, как кадр WKWebView? - PullRequest
Новая
       22

Как установить высоту и ширину iFrame так же, как кадр WKWebView?

1 голос
/ 11 апреля 2019

Я дал размер кадра WKWebView("myPlayer" in below code) динамически для iFrame, встроенного в него, но при просмотре видео на YouTube отображается 1/3 WKWebView.Ниже приведен мой код и справочное изображение.

small video in WKWebView

let videoURL:URL = URL(string: "https://www.youtube.com/embed/695PN9xaEhs")!
@IBOutlet weak var myPlayer: WKWebView!
var didLoadVideo = false
var embedVideoHtml:String?
override func viewDidLoad() {
    super.viewDidLoad()
    embedVideoHtml = {
    return """
    <!DOCTYPE html>
    <html>
    <body>
    <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
    <div id="player"></div>

    <script>
    var tag = document.createElement('script');

    tag.src = "https://www.youtube.com/player_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    var player;
    function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
    playerVars: { 'autoplay': 1, 'controls': 0, 'playsinline': 1 },
    height: '\(myPlayer.frame.height)',
    width: '\(myPlayer.frame.width)',
    videoId: '\(videoURL.lastPathComponent)',
    events: {
    'onReady': onPlayerReady
    }
    });
    }

    function onPlayerReady(event) {
    event.target.playVideo();
    }
    </script>
    </body>
    </html>
    """
}()


}

Итак, у кого-нибудь есть идеи, как разместить видео с YouTube в кадре myPlayer?

1 Ответ

2 голосов
/ 11 апреля 2019

В вашем embedVideoHtml до <body> добавьте следующий код: 

<style>
    * { margin: 0; padding: 0; }
    html, body { width: 100%; height: 100%; }
</style>

и в параметрах плеера измените следующие параметры: 

height: '\(myPlayer.frame.height)',
width: '\(myPlayer.frame.width)',

до: 

height: '100%',
width: '100%',

После этих изменений ваш игрок должен быть настроен на размер WKWebView

...