Question

在我参与的先前网站中有一些非常基本的HTML参与，我正在学习HTML和CSS，以便能够在我的新网站上做更多的工作。

目前我有一个Youtube视频的静态图像，其中一个链接可以在新页面上打开一个全屏播放器，但我想用嵌入式Youtube播放器替换该静态图像，以便在我的网页上播放视频

网页上有一些地方（http://www.johnpearsesafaris.com/page-news-ls.html#）这个方法被使用了，但我最初试图只是在标题为“怎么做”的情况下，改变翅膀的最高图像。他们曾经拍过这部电影吗？“

我最初访问了youtube网站，解释了他们拥有的各种嵌入播放器选项，并决定使用iframe，因为我之前在其他地方使用过iframe。

在我的第一次尝试中，我设法让播放器嵌入自己并播放视频，但不幸的是它搞砸了页面上的其余格式。所有其他新闻帖子的静态图片消失了，页面其余部分的格式化失败了。

=然后我查看了一些关于如何做到这一点的不同指南，并花了几个小时试图纠正这种情况，但我似乎无法克服格式化的中断。

我所做的是用以下HTML替换行166和185之间的HTML：

<div class="row">
  <div class="loop-posts eight columns">
    <div id="div3" class="post-CLASS blog-post-item b30">
      <div class="post-heading">
        <h2 class="blog-title"><a
     href="https://www.youtube.com/v/XBEyCr5AoIs" target="_blank">How
    did they ever film this?</a> </h2>
        <div class="blog-meta"> <span class="blog-date">FEB
    2014 <span class="blog-author"><span>
    By </span><a class="blog-author-tooltip" rel="tooltip" data-original-title="View all posts by TheEditor" href="#">The
    Editor</a>
          </span>
          </span>
        </div>
      </div>
      <div class="blog-thumb-wrapper">
        <iframe src="//www.youtube.com/embed/XBEyCr5AoIs" allowfullscreen="" frameborder="0" height="360" width="640"></iframe>
      </div>
      <div class="blog-excerpt">
        <p>How did they ever film this?</p>
      </div>
    </div>
  </div>
</div>

我希望这对我来说是一个简单的疏忽。令我困惑的是div课程。

我承认我对他们的了解不多，但他们一直在观看多个教学视频并使用各种其他来源，以便加快速度。

我真的很感激任何人可以帮助我解决问题的任何帮助/指导。在此期间我会继续尝试自己修复它。

Answer 1

替换为：

<div class="row">
    <div class="loop-posts eight columns">
        <div class="post-CLASS blog-post-item b30" id="div3">
            <div class="post-heading">
                <h2 class="blog-title"><a href=
                "https://www.youtube.com/v/XBEyCr5AoIs" target="_blank">How
                did they ever film this?</a></h2>

                <div class="blog-meta">
                    <span class="blog-date">FEB 2014 <span class=
                    "blog-author">By <a class=
                    "blog-author-tooltip" data-original-title=
                    "View all posts by TheEditor" href="#" rel=
                    "tooltip">The Editor</a></span></span>
                </div>
            </div>

            <div>
                <iframe frameborder="0" height="360" src=
                "//www.youtube.com/embed/XBEyCr5AoIs" width="640"></iframe>
            </div>

            <div class="blog-excerpt">
                <p>How did they ever film this?</p>
            </div>
        </div>
    </div>
</div>

在网站页面上嵌入Youtube播放器

1 个答案: