嵌入的 Youtube 视频不显示
Youtube video embeded doesnt show
我从YouTube上复制了给出的嵌入式代码,然后将其粘贴到我的网站中。但是,每当我加载网站而不是出现在给定表空间中的页面底部时,它都会显示为网页顶部的空白区域。我已经在多个视频中尝试过这个,但仍然发生了同样的事情,或者相反,它显示一个宽度和高度的框,上面编码有消息"文件不在您的目录中"
这是 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"> </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;
}
这是加载时发生的情况的屏幕截图!
尝试将 iframe 放入<td>
是的,它应该放在TD内但是YouTube地址也不正确
在 iframe 中,地址 http: 缺失
将 iframe 代码替换为此代码
<iframe width="640" height="360"
src="http://www.youtube.com/embed/H0Ib9SwC7EI?feature=player_detailpage"
frameborder="0" allowfullscreen>
相关文章:
- 如何检测浏览器并根据浏览器显示视频
- 使用Lightbox2显示视频
- 如何使用Thickbox显示视频
- 显示视频JS的视频持续时间
- 如何在HTML页面中显示Javascript/Jquery值?VideoJs 显示视频的持久性
- After Effects ExtendScript - 随机隐藏和显示视频图层
- Brightcove:如何使用javascript显示视频观看次数
- 如何从数据库在主页上显示视频列表
- 如何在滑块中显示视频
- $(document).ready 或 window.onload 用于隐藏/显示视频
- 视频库:单击文本,显示视频
- 在 html5 网页中显示视频
- Videojs不显示视频
- google+和facebook风格的iframeyoutube视频.默认情况下显示视频图像,当图像点击视频播放时
- HTML5显示视频的缩略图预览
- 显示视频播放后弹出链接
- onLoad显示视频
- 通过AJAX读取后显示视频blob
- 浏览后如何在我的jsp中显示视频
- 我更新了相同的视频ID,但youtube-api v3仍然显示“视频未找到”