我的YouTube视频无法在iframe中显示
我的YouTube视频无法在iframe中显示
提问于 2016-03-31 23:01:31
下面是我在HTML中输入的代码
<iframe width="640" height="360" src="https://www.youtube.com/watch?v=ZwKhufmMxko">
</iframe>视频帧将会显示，但实际的视频不会加载，甚至不会显示。我已经尝试过等待，所以这不应该是一个加载问题。
我目前也只使用HTML和CSS
你有什么建议吗?我该怎么做呢？
回答 3
Stack Overflow用户
回答已采纳
发布于 2016-03-31 23:12:19
YouTube不允许第三方像那样直接嵌入他们的网站。使用
<iframe width="640" height="360" src="https://www.youtube.com/watch?v=ZwKhufmMxko">
</iframe>将引发一个错误Refused to display 'https://www.youtube.com/watch?v=ZwKhufmMxko' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.来指明这一点(您真的应该检查控制台中的这些内容)。
幸运的是，Youtube提供了“嵌入视频”选项，您需要使用该选项才能嵌入视频。
例如，您的链接视频将生成iframe代码：
<iframe width="560" height="315" src="https://www.youtube.com/embed/ZwKhufmMxko" frameborder="0" allowfullscreen></iframe>Stack Overflow用户
发布于 2016-03-31 23:15:12
将watch?v=更改为embed/
获得正确链接的最简单方法是在YouTube视频上使用right-click，然后选择copy embed code。
<iframe width="854" height="480" src="https://www.youtube.com/embed/ZwKhufmMxko" frameborder="0" allowfullscreen></iframe>Stack Overflow用户
发布于 2021-03-29 02:03:26
我来晚了，但这里是我用来转换的youTube网址嵌入和使视频工作。
function getVideoId(url) {
const regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/;
const match = url?.match(regExp);
return (match && match[2].length === 11)
? match[2]
: null;
}
const videoId = getVideoId('https://www.youtube.com/watch?v=fB4Ca1iTii8');
const iframeMarkup = '<iframe src="https://www.youtube.com/embed/'
+ videoId + '" frameborder="0" allowfullscreen></iframe>';
console.log('Video ID:', videoId) // fB4Ca1iTii8
console.log("https://www.youtube.com/embed/" + videoId)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/36337086
复制相关文章
相似问题