Question

我尝试将youtube包含在iframe中，但它显示为空白。这是我正在检查的代码

<!DOCTYPE html>
<html>
<body>

<iframe src="http://www.youtube.com">
<p>Your browser does not support iframes.</p>
</iframe>

</body>
</html>

为什么会这样？我该怎么办才能让它发挥作用？

Answer 1

检查console。它很可能会有如下消息：

拒绝在相框中显示“https://www.youtube.com/”，因为它将“X-Frame-Options”设置为“SAMEORIGIN”。

详细了解X-Frame-Options here：

X-Frame-Options响应标题

X-Frame-Options HTTP响应标头可用于指示是否允许浏览器在<frame>，<iframe>或<object>中呈现页面。通过确保其内容未嵌入其他网站，网站可以使用此功能来避免点击劫持攻击。

[...]

<强> SAMEORIGIN

页面只能显示在与页面本身相同的原点的框架中。

[...]

换句话说，如果指定SAMEORIGIN，只要包含在页面中的网站与提供页面的网站相同，您仍然可以在框架中使用该页面。

长话短说：Youtube不希望你嵌入他们的网站（注意：我在这里谈论网页，不视频！）并明确设置了HTTP标头将其传达给浏览器。

如果您想要显示/嵌入视频，请使用位于“共享»嵌入”下每个视频下方的代码。

<iframe width="1280" height="720" 
        src="https://www.youtube.com/embed/dQw4w9WgXcQ?rel=0&amp;showinfo=0"
        frameborder="0" allowfullscreen>
</iframe>

Answer 2

你可以尝试这个：

<!DOCTYPE html>
<html>
<body>

<iframe allowfullscreen="true" src="http://www.youtube.com/embed/c0MZ2bTtBm0?autoplay=1&amp;autoplay=1" style="width: 100%; height: 100%; opacity: 1; display: block;" class="ms-slide-video"></iframe>

</body>
</html>

iframe上的youtube无效

2 个答案: