Question

以下是我在HTML中输入的代码

<iframe width="640" height="360" src="https://www.youtube.com/watch?v=ZwKhufmMxko">
</iframe>

视频帧会显示，但实际视频无法加载甚至显示。我试过等待，所以它不应该是一个加载问题。

我目前也只使用HTML和CSS

关于如何让它发挥作用的任何想法？

Answer 1

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>

Answer 2

改变＆＃34;观察？v =＆＃34;到＆＃34;嵌入/＆＃34;

获取正确链接的最简单方法是右键点击YouTube视频，然后选择＆＃34;复制嵌入代码＆＃34;。

<iframe width="854" height="480" src="https://www.youtube.com/embed/ZwKhufmMxko" frameborder="0" allowfullscreen></iframe>

Answer 3

我迟到了，但在这里我用来将 YouTube url 转换为 Embed 并使视频正常工作。

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)

我的YouTube视频无法在iframe中显示

3 个答案: