Question

从youtube我复制了嵌入的代码然后粘贴到我的网站。但是，每当我加载网站而不是出现在给定表空间中页面底部时，它就会显示为网页顶部的空白区域。我已尝试过多个视频，但仍然会发生同样的事情，或者它显示一个宽度和高度的框，用消息编码＆＃34;文件不在您的目录中＆＃34;

这是HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Josh Taylor</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>

<div id="header">
<h1 class="PageHeader"> JOSH TAYLOR</h1>
<div id="navigation">
<ul class="Navigation">
  <li><a href="index.html" class="thispage"> HOME </a></li>
  <li><a href="Music.html">MUSIC</a></li>
  <li><a href="Film.html">FILMMAKING</a></li>
  <li><a href="Photo.html">PHOTO</a></li>
  <li><a href="Justified.html"> JUSTIFIED DESIGN </a></li>
</ul>
</div>
</div>
<div id="content">

<table width="50%" border="0" align="center" class="table">
<tr>
  <td class="table"><span class="PageTitle">Filmmaking and Video editing</span></td>
</tr>
<tr>
  <td class="table"><p class="Introduction">In watching hours of videos on YouTube,  TV shows and       Films I got inspired to create my own content through filming video  and editing the clips by the use of video editing software.</p></td>
</tr>
<tr>
  <td class="table"><span class="H1">Short films</span>
    <p>For the past couple of years I  have enjoyed going out with my friends and filming small films that are usually  action-based and generally experimenting with my camera which I bought around a  year ago. I used to film on a old family digital camera however decided on  getting a DSLR camera to suit both my Filmmaking and Photograph hobbies. I  recently went on a trip to London and filmed 250 small clips all between 1-10  seconds long where I am currently editing all the clips together to create a  montage of my experience.</p>
    <p><img src="../GFX/FreddieW.jpg" width="620" height="350"></p>
<h1 class="H1"> VFX</h1>
  <p>VFX stands for Visual effects and  is a large part of what inspired me to get involved with  filmmaking and video  editing. FreddieW and Corridor Digital are two major channels on YouTube that  create short films that always involve visual effects in their videos created  by them in software such as Adobe after effects. I have been watching FreddieW  for many years and the channel has over 1 billion total views on all his  videos. They inspired me in that these effects were possible from my own  computer and therefore I have continued to practice and learn visual effects  software such as after effects.</p></td>


</tr>
<tr>
  <td class="table"></td>
  <iframe width="640" height="360"      
 src="//www.youtube.com/embed/H0Ib9SwC7EI?feature=player_detailpage"
 frameborder="0" allowfullscreen>
</tr>
</table>
<h1 class="H1">&nbsp;</h1>
</div>
<div id="footer">
<h3 class="PageFooter"> JOSH TAYLOR - 2014 </h3>
</div>
</body>
</html>

这是CSS样式表

@charset "utf-8";
body {
margin: 0;
padding: 0;
background-color: #000;
}

#header {
background-color: #000;
clear: both;


}

#content {
background-color: #FFF;
float: none;
clear: both;
font-family: "Futura LT Light";
font-size: 16px;
text-align: center;
text-indent: 0;
padding-left: 0%;
background-image: url(../GFX/Background2.png);
background-repeat: repeat;
}

.PageHeader {
font-family: "Code Bold";
font-size: 50px;
color: #FFF;
text-align: center;
background-color: #000;
}
#navigation ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}


.Navigation {
font-family: Futura-Heavy;
font-size: 18px;
color: #FFF;
}

.PageFooter {
font-family: "Futura LT Light";
font-size: 14px;
color: #FFF;
text-align: left;
}


#navigation {
background-color: #666;
float: none;
clear: both;

}
#footer {
background-color: #000;
clear: both;
padding-left: 15%
}
.maintext {
font-family: "Futura LT Light";
font-size: 24px;
font-style: normal;
color: #000;

}
.H1 {
font-family: Futura-Heavy;
font-size: 36px;
}
#navigation a {
text-align: center;
display: block;
float: left;
width: 20%;
background-color: #000;
color: #FFF;
text-decoration: none;
}


#navigation a:hover, #navigation a:active, #navigation a:focus, #navigation a.thispage {
background-color: #43a6cb;
color: #000000;
text-decoration: none;
}
#Hyperlink a:hover, #Hyperlink a:active, #Hyperlink a:focus, #Hyperlink a.thispage {
color: #43A6CB;
}


.H2 {
font-family: Futura-Heavy;
font-size: 30px;
}
.PageTitle {
font-size: 40px;
font-family: Futura-Heavy;
color: #000;
}
.Introduction {
font-family: "Futura LT Light";
font-size: 20px;
}


.H3 {
font-family: Futura-Heavy;
font-size: 24px;
}
.Hyperlink {
font-family: Futura-Heavy;
font-size: 18px;
color: #666;
text-decoration: none;
}
.Hyperlink a:hover, .Hyperlink a:active, .Hyperlink a:focus, .Hyperlink a.thispage {
color: #43A6CB;
}

Here is a screenshot of what happens when loaded!

Answer 1

尝试将iframe放在<td>

中

Answer 2

是的，它应该放在td内但youtube地址也不正确 iframe src地址 http：缺失

用这个替换iframe代码

<iframe width="640" height="360"      
 src="http://www.youtube.com/embed/H0Ib9SwC7EI?feature=player_detailpage"
 frameborder="0" allowfullscreen>

Youtube视频嵌入不显示

2 个答案: