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

Question

我已经为其中嵌入的 iFrame 动态给出了 WKWebView("myPlayer" in below code) 帧的大小，但是 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

的大小

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

how to set iFrame height and width same as WKWebView frame?

iframe

youtube-api

ios

swift

wkwebview