我试图在我的网页中嵌入一个 youtube 视频，但它根本没有显示

Question

我是 HTML 编程新手，所以请多多包涵。为什么嵌入的 you tube 视频不显示？我在这里错过了什么吗？我还包含了 CSS 文件，以备不时之需。非常感谢。

<!DOCTYPE html>
<html>
<head>
    <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
    <title>Mysteries</title>
    <meta charset="utf-8">
</head>

<html>
<body class="index">

<div id="header_box">
    <h4 class="logo">MYSTERIES<span class="orange2">/</span>PARANORMAL</h4>
    <a  href="index2.html" id="content_link">CONTENT</a>
</div>


<div id="footer">
    <h4>&#60;OKLAH/WEBSOFT&#62; 2015 All Rights Reserved.</h4>
<div>

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

</body>
</html>


Here is the CSS Code for the webpage, please keep in mind im new  to all this, so i might have some css errors in there

#header_box {
z-index: 1;
position: fixed;
background-color: rgba(255,255,255,0.25);
border: 1px solid #FFF;
width: 100%;
height: 22px;
left: -2px;
padding: 1em 1.5em;
padding-top: 1em;
padding-right: 1.5em;
padding-bottom: 1em;
padding-left: 1.5em;
top: 0px;

}

.index {
background: #000;
}

.logo {
color: white;
font-family: Verdana;
font-weight: 300px;
float: left;
padding-top: 0px;
margin-top: 0px;
font-size: 16px;


}

}
.orange2 {
color: #FF6600;
}
.orange {
color: #FF6600;
}
.h2 {
color: #FFF;
text-align: center;
padding-top: 10px;
font-family: ISOCT;
letter-spacing: 0.1em;
text-transform: uppercase;
}
img {
float: center;
width: 55px;
height: 50px;
padding-top: 70px;
display: block;
margin: auto;
}

p {
color: #FFF;
text-align: center;
font-family: ISOCT;
font-size: 20px;

}
#paranormal_cont {
color: #FFF;
font-family: Verdana;
float: right;
text-decoration: none;
margin-right: 20px;
}
#paranormal_cont:hover{
border: 1px;
border-style: dotted;
font-weight: bold;
color: #FF6600;
}
#content_link {
color: #FFF;
font-family: Verdana;
float: right;
text-decoration: none;
margin-right: 50px;
}

#content_link:hover {
border: 1px;
border-style: dotted;
font-weight: bold;
color: #FF6600;

}

#footer {

position: fixed;
bottom: 0px;
margin: 0;
padding: 0;
left: 0;
right: 0;
background-color: rgba(255,255,255,0.25);
border: 1px solid #FFF;
width: 100%;
height: 40px;
left: -1px;
}

#footer h4 {
position: relative;
text-align: left;
color: #FFF;
font-family: Verdana;
font-size: 14px;
font-weight: 300px;
margin-left: 10px;
margin-top: 10px;}

Answer 1

youtube 视频的 URL 中有一个 space。删除它。

改变这个：

<iframe width="560" height="315" src="https://www.youtube.com/embed /Gas8f7dJfWc?rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe>

为此：

<iframe width="560" height="315" src="https://www.youtube.com/embed/Gas8f7dJfWc?rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe>

更新您也没有关闭页脚。

我更新了 fiddle： JSFiddle

Answer 2

问题是你忘了关闭页脚-div。这就是您没有看到 iframe 的原因。

此外，为了完整起见提及它 "Change the link so it has no space in it"，尽管你已经排除了它的问题，因为你说

actually there is no space in the original code, so the link is ok, what else could it be?

为了完整起见，这里有完整的工作代码。

<!DOCTYPE html>
<html>
<head>
    <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
    <title>Mysteries</title>
    <meta charset="utf-8">
</head>

<html>
<body class="index">

<div id="header_box">
    <h4 class="logo">MYSTERIES<span class="orange2">/</span>PARANORMAL</h4>
    <a  href="index2.html" id="content_link">CONTENT</a>
</div>


<div id="footer">
    <h4>&#60;OKLAH/WEBSOFT&#62; 2015 All Rights Reserved.</h4>
</div> <!-- You forgot to close this div -->

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

</body>
</html>

我试图在我的网页中嵌入一个 youtube 视频，但它根本没有显示

I am trying to embed a youtube video in my webpage but it does not show at all

html

css

embed

youtube

video