嵌入 HTML YouTube 视频；显示不正确答案

【问题标题】：Embed HTML YouTube Video; Displaying Incorrectly嵌入 HTML YouTube 视频；显示不正确
【发布时间】：2014-02-13 01:42:22
【问题描述】：

我正在使用 DreamWeaver 从头开始构建网页（无模板）。这是一个学校项目。

在我尝试嵌入 YouTube 视频之前，我的 DIV 格式没有问题。为什么我的 YouTube 视频直接卡在标题下方？此外，页面右侧的 DIV/Table 也不正常。它只想要左边的 YT 视频和右边的桌子，我希望它们水平排列。

感谢您的帮助。 Click to view the Webpage, with obvious errors.

代码：

HTML-

<!DOCTYPE>

<html>

<head>

<link rel="stylesheet" type="text/css" href="FamilyBookMain.css">

</head>

<title>FamilyBook.com</title>

<body>
<div id="top">
</div>

<div class="video-container">
    <iframe width="560" height="315" src="//www.youtube.com/embed/MQgdE1_lHnA?rel=0" allowfullscreen></iframe>
       <div class="famtree">
<img src="images/fambooktree.png" width="705" height="221"/>   
    </div>
 </div>



<div id="body">
   <table style="border-collapse:collapse;">
        <thead>

<h1>Your Ancestors Are Dead.</h1> 
<h1>But Here, They're Still Alive.</h1>
            <br>

        </thead>

        <tbody>
            <tr>
                <td style="padding:10px"> 
                <p class="table"><br>Welcome to the world's <strong>largest</strong> online resource for social media profiles and data from the twenty-first century. FamilyBook.com is home to billions of profiles from MySpace, FaceBook, Twitter, Instagram, and more. <br> <br> 
                We are the <strong>leading provider of social media data</strong> from the early 2000s, including searchable image tags, status updates, relationship histories, friendships and family networks. Our mission is to link people to the personal histories of their ancestors- one social media profile at a time.</p></td> </tr>

               <tr><td style="padding:10px">
                <p class="table">
                Imagine the stories that you'll uncover as you explore your loved one's Facebook timeline and likes, private messages and chat logs, Twitter conversations, and Instagram uploads. The <strong>secrets</strong> that you uncover may even surprise you.<br>

               <br> Simply start with a name and <strong>we'll do the rest.
                </strong> Discover your ancestor's past. Learn where you came from. <br> 
                </p></td>     
            </tr>
        </tbody>
           <thead>
            <tr>
                <th class="head" colspan="2">
                <strong>Our services are coming soon!</strong><br><br>

            </tr>
        </thead>
    </table>
    </div>   


<div class="footer">
<p id="footer"><img src="http://img.photobucket.com/albums/v483/CrazyInsaneJess/familybook.png" width="139" height="25"/>
<br>Jessica E. Tompkins 2014 | <a href="http://en.gravatar.com/jesstompkins"> About</a>
</p>
</div>


</body>

</html>

CSS-

@charset "UTF-8";
/* CSS Document */

body {
background-color:#EEEEEE;
position: fixed;

}

#top {
width: 100%;
height: 60px;
background-   image:url('http://img.photobucket.com/albums/v483/CrazyInsaneJess/familybook.png');
background-color:#FFF;
background-repeat:no-repeat;
background-position:60px bottom;
border-bottom-width:thin;
border-bottom-color: #333;
border-bottom-style:solid;
position: fixed;
top: 0px;
}

#body {
width: 550px;
height: 400px;
background-color: #99aabb;
text-align: right;
margin: 10px;
position: relative;
left: 650px;
bottom: 215px;
}

h1 {
color: #333;
font-family: Arial, Verdana, sans-serif;
text-align: center;
margin: 0px;
top: 10px;
position: relative;
}

.video {
position: relative;
left:170px;
top: 170px;
}


ul.crap {
color: #333;
font-family: Georgia, "Times New Roman", Times, serif;
font-size:12px;
}

#video {
color: #99aacc;
font-family: Arial, Verdana, sans-serif;
text-align: center;
height: 200;
width: 450;
margin: 350px 0px 0px;
position: absolute;
}

.table {
font-family:Arial, Helvetica, sans-serif;
text-align:left;
font-size:14px;
color: white;
}

.head {
color: #333;
font-family: Verdana, Geneva, sans-serif;
font-size:16px;
padding: 15px;
font-weight:100;
}

.footer{
width: 100%;
height: 60px;
background-color: #99aacc;
border:1px solid #333;
position:fixed;
bottom:0px;
}

#footer{
font-family:Arial, Helvetica, sans-serif;
font-size:9px;
padding:5px;
color: white;
text-align:center;
}

a {
text-decoration:none;
}

【问题讨论】：

您有几个没有开始使用的 ID 和类，但这不是问题；）您可以创建一个包装器，将表格和视频放在一起，两者都有 float:left 和具有overflow:auto 的包装器。您是否也想将它们与页面中心对齐？顺便说一句，很酷的任务，比我在学校的那些要酷得多
仅作记录，这个问题可能更适合 codereview.stackexchange.com。
嗨@JessT，我注意到您更新了您的网站以包含我建议的更改。如果我的回答解决了您的问题，请按复选标记接受。谢谢！

标签： html css youtube embed webpage

【解决方案1】：

首先，欢迎来到 StackOverflow。我只花了大约一分钟查看和编辑您的代码，但我想我明白了您想要做什么的要点。请看下面的代码：

更改您的 #body 元素以匹配以下代码：（我绝对定位了 div。）

  #body {
width: 550px;
height: 400px;
background-color: #99aabb;
text-align: right;
margin: 10px;
position: absolute;
left: 650px;
top:65px
}

将其粘贴到您的 CSS 中：

.video-container{
    width:auto;
    height:auto;
    margin-top:75px;

}

现在，我只想说您的 HTML 有点乱，可以简化很多。正如@Havard Brynjulfsen 指出的那样，有一些 ID 和类仍未使用。无论如何，上面的代码应该会产生预期的结果，但是如果你愿意改变你的 HTML 结构，你正在尝试做的事情可以更优雅地完成。

另外，您的 HTML 中存在一些错误。我强烈建议使用官方W3C validator 验证您的代码。

有太多的问题我无法在这里列出而不偏离主题，但这里有一些大问题：

你的doctype声明不正确，应该是<!DOCTYPE html>。
您的<title> 应该在您文档的<head> 中。

【讨论】：