CODEWITHSUNDEEP
htmliframeyoutube
Aaron Nettles
Aaron Nettles

Reputation: 21

IFrame: This content cannot be displayed in a frame; the error is still occurring after adding header

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 

<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. 

   <!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>

Upvotes: 1

Views: 30571

Answers (1)

tiblu
tiblu

Reputation: 3078

To embed with Iframe, you need to use different url for your video - 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

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.

More on the X-FRAME-OPTIONS - https://developer.mozilla.org/en-US/docs/Web/HTTP/X-Frame-Options

Upvotes: 1

Related Questions