如何使用 bootsrap3 嵌入 youtube 播放器和 facebook api？答案

【问题标题】：How to embed the youtube player and facebook api using bootsrap3?如何使用 bootsrap3 嵌入 youtube 播放器和 facebook api？
【发布时间】：2015-07-03 12:10:59
【问题描述】：

每个人。

我的名字是 Cody，我是一名学生/业余网页设计师，受雇为家人朋友创建网站。

我正在使用 bootstrap3 使网站具有响应性，但我在尝试将 youtube 播放器 API 和 facebook 页面 API 一起嵌入网站主页时遇到了问题。

col-8 应该作为主要内容区域，而 col-4 应该作为侧边栏/共享部分。

该页面正确呈现 youtube 播放器，但不显示任何带有 col-4 或之后的内容。但是，如果我禁用 youtube 播放器，页面将正确加载。

如果你能帮我找出问题所在，那就太好了。

<body>
<div class="container row">
    <div class="col-sm-8">.col-sm-8
        <h3>What is Roger's Lake of the Woods Adventures?</h3>
        <p>testing testing</p>
        <!-- Youtube Player API Placement -->
        <div class="embed-responsive embed-responsive-16by9">
        <iframe class="embed-responsive-item"
        id="ytplayer" 
        type="text/html" 
        src="http://www.youtube.com/embed/M7lc1UVf-VE?autoplay=0&origin=http://lakeofthewoodsadventures.com" 
        />
        </div>
        <!-- End of Youtube Player API Placement -->
    </div>
    <div class="darkBG col-sm-4">
    <!-- Facebook Page Feed API Placement -->
        <div class="fb-page" data-href="https://www.facebook.com/pages/Rogers-Lake-of-the-Woods-Adventures/597978003639919" 
        data-width="280" 
        data-hide-cover="true" 
        data-show-facepile="false" 
        data-show-posts="true">
        <div class="fb-xfbml-parse-ignore">
        <blockquote cite="https://www.facebook.com/pages/Rogers-Lake-of-the-Woods-Adventures/597978003639919">
        <a href="https://www.facebook.com/pages/Rogers-Lake-of-the-Woods-Adventures/597978003639919">
        Roger&#039;s Lake of the Woods Adventures
        </a>
        </blockquote>
        </div>
        </div>
    <!-- End of Facebook Page Feed API Placement -->
    </div>
</div>
<script src="Local Bootstrap/js/bootstrap.min.js"></script>
</body>

谢谢！ - 科迪

【问题讨论】：

标签： html css facebook youtube embed

【解决方案1】：

<iframe src="">youtube code**</iframe>**

您必须打开和关闭 iframe 标记。

【讨论】：

天哪>。

【解决方案2】：

尝试添加</iframe> 标签。

<iframe class="embed-responsive-item"
        id="ytplayer" 
        type="text/html" 
        src="http://www.youtube.com/embed/M7lc1UVf-VE?autoplay=0&origin=http://lakeofthewoodsadventures.com" 
        ></iframe>

【讨论】：

非常感谢，帮了大忙。