如何将 iFrame 的高度和宽度设置为与 WKWebView 框架相同？
Posted
技术标签:
【中文标题】如何将 iFrame 的高度和宽度设置为与 WKWebView 框架相同？【英文标题】：how to set iFrame height and width same as WKWebView frame? 【发布时间】：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% 并没有帮助，但这个答案确实有效：***.com/a/58664524/4397 【参考方案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 框架相同？的主要内容，如果未能解决你的问题，请参考以下文章
您如何在 fancybox V2 中为 iframe 设置不同的高度/宽度？