如何设置iFrame的高度和宽度与WKWebView框架相同？

Question

我已经为嵌入在其中的WKWebView("myPlayer" in below code)动态给出了iFrame框架的大小，但是youtube视频视图显示了WKWebView的1/3。下面是我的代码和参考图像。

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>
    """
}()


}

那么任何人都知道如何在myPlayer框架中安装youtube视频视图？

Answer 1

在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的大小

如何设置iFrame的高度和宽度与WKWebView框架相同？

问题描述投票：1回答：1

1个回答

最新问题

如何设置iFrame的高度和宽度与WKWebView框架相同？

问题描述 投票：1回答：1

1个回答

最新问题

问题描述投票：1回答：1