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

【问题标题】：how to set iFrame height and width same as WKWebView frame?如何将 iFrame 的高度和宽度设置为与 WKWebView 框架相同？
【发布时间】：2019-09-01 22:28:28
【问题描述】：

我为嵌入其中的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>
    """
}()


}

那么有人知道如何将 youtube 视频视图放入 myPlayer 框架中吗？

【问题讨论】：

尝试打印 embedVideoHtml 并查看值是否设置正确
@AjinkyaSharma embedVideoHtml 显示与 WKWebView 相同的大小（宽度、高度），但不适合它。我认为必须存在缩放问题..因为有 px 的概念。你怎么看？
我在尝试嵌入 Vimeo 视频时遇到了类似的问题。对我来说，将宽度和高度设置为 100% 并没有帮助，但这个答案确实有效：stackoverflow.com/a/58664524/4397

标签： ios swift iframe youtube-api wkwebview

【解决方案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的大小

【讨论】：

欢迎马尼什。很高兴我帮助了你。