Html IFrame：此内容无法在框架中显示；添加标题后错误仍然发生
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29549154/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
IFrame: This content cannot be displayed in a frame; the error is still occurring after adding header
提问by Aaron Nettles
I am receiving the error:
To help protect the security of information you enter into this website, the publisher of this content does not allow it to be displayed in a frame. I just want to embed a YouTube video to my site and I've added the tags
我收到错误消息：
为了帮助保护您输入到本网站的信息的安全，此内容的发布者不允许将其显示在框架中。我只想将 YouTube 视频嵌入到我的网站中，并且我已经添加了标签
<meta http-equiv="X-Frame-Options" content="allow">
But the error is still occurring. Here is the entire code down to where I added the iframe tags.
但错误仍在发生。这是我添加 iframe 标签的完整代码。
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="shortcut icon" href="/img/favicon.jpg">
<meta charset="utf-8">
<meta http-equiv="X-Frame-Options" content="allow">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>DroneDaddy</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/business-casual.css" rel="stylesheet">
<!-- Fonts -->
<link href="http://fonts.googleapis.com/css? family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,7 00,800" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css? family=Josefin+Slab:100,300,400,600,700,100italic,300italic,400italic,600italic, 700italic" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> </script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<body>
<p> </p>
<p> </p>
</body>
</head>
<body>
<div class="brand">Welcome to DroneDaddy</div>
<div class="address-bar">Lawton, Ok</div>
<!-- Navigation -->
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- navbar-brand is hidden on larger screens, but visible when the menu is collapsed -->
<a class="navbar-brand" href="index.html">DroneDaddy</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -- >
<div class="collapse navbar-collapse" id="bs-example-navbar- collapse-1">
<ul class="nav navbar-nav">
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="about.html">About</a>
</li>
<li>
<a href="contact.html">Contact</a>
</li>
<li>
<a href="realestate.html" class="dropdown-toggle" data- toggle="dropdown">services
<b class="caret"> </b>
</a>
<ul class="dropdown-menu">
<li><a href="realestate.html">Real Estate</a></li>
<li class="divider"></li>
<li><a href="inspection.html">Aerial Inspection</a></li>
<li class="divider"></li>
<li><a href="advertisement.html">Advertisement</a></li>
<li class="divider"></li>
<li><a href="photography.html">Aerial Photography</a></li>
<li class="divider"></li>
<li><a href="police_tatical.html">Police/Tactical Response</a> </li>
</ul>
</li>
<li>
<a href="blog.html">News</a>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<div class="container">
<div class="row">
<div class="box">
<div class="col-lg-12 text-center">
<div id="carousel-example-generic" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators hidden-xs">
<li data-target="#carousel-example-generic" data- slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data- slide-to="1"></li>
<li data-target="#carousel-example-generic" data- slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="jumbotron col-lg-12">
<h1>Featured Video</h1>
<p>
Hello, Ok.
</p>
<iframe width="420" height="315"
src="https://www.youtube.com/watch?v=e2od1FBOCU8">
</iframe>
</div>
回答by tiblu
To embed with Iframe, you need to use different url for your video - https://www.youtube.com/embed/e2od1FBOCU8
要嵌入 iframe，您需要为视频使用不同的 url - https://www.youtube.com/embed/e2od1FBOCU8
More info on how to embed a YouTube video to your site - http://www.w3schools.com/html/html_youtube.asp
有关如何将 YouTube 视频嵌入您的网站的更多信息 - http://www.w3schools.com/html/html_youtube.asp
The X-FRAME-OPTIONS is not to be defined by you, but YouTube sends it in video viewing page HTML response header and denies any page from embedding it. When you define the header on your page, it means your page cannot be embedded.
X-FRAME-OPTIONS 不是由您定义的，但 YouTube 在视频观看页面 HTML 响应标头中发送它，并拒绝任何页面嵌入它。当您在页面上定义页眉时，这意味着您的页面无法嵌入。
More on the X-FRAME-OPTIONS - https://developer.mozilla.org/en-US/docs/Web/HTTP/X-Frame-Options
更多关于 X-FRAME-OPTIONS - https://developer.mozilla.org/en-US/docs/Web/HTTP/X-Frame-Options
