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

Question

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

3

我已经动态地为WKWebView("myPlayer" 在下面的代码中)的框架设置了尺寸，但是嵌入其中的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>
    """
}()


}

有没有人知道如何将YouTube视频视图适配到我的播放器框架中？

- Manish

尝试打印embedVideoHtml并查看值是否正确设置。 - AjinkyaSharma

@AjinkyaSharma，embedVideoHtml的大小（宽度，高度）与WKWebView相同，但不适合其中。我认为这可能存在缩放问题……因为有px的概念。你觉得呢？ - Manish

我曾经遇到过类似的问题，尝试嵌入 Vimeo 视频时也是如此。对我来说，将宽度和高度设置为 100% 没有帮助，但这个答案有用：https://dev59.com/1bHma4cB1Zd3GeqPO6gW#58664524 - andygeers

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- axel · Accepted Answer

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