Question

我收到错误：
为帮助保护您在本网站上输入的信息的安全性，此内容的发布者不允许将其显示在框架中。我只想在我的网站上嵌入YouTube视频，并添加了标签

<meta http-equiv="X-Frame-Options" content="allow">

但错误仍在发生。以下是我添加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>&nbsp;</p>
<p>&nbsp;</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>

Answer 1

要嵌入iframe，您需要为视频使用不同的网址 - https://www.youtube.com/embed/e2od1FBOCU8

有关如何将YouTube视频嵌入您网站的更多信息 - http://www.w3schools.com/html/html_youtube.asp

X-FRAME-OPTIONS不是由您定义的，但YouTube会在视频查看页面HTML响应标头中发送它，并拒绝任何嵌入它的页面。当您在页面上定义标题时，这意味着您的页面无法嵌入。

有关X-FRAME-OPTIONS的更多信息 - https://developer.mozilla.org/en-US/docs/Web/HTTP/X-Frame-Options

IFrame：此内容无法在框架中显示;添加标题后仍出现错误

1 个答案: