时间戳

首页 > 解决方案 > 按钮和视频在 HTML/Bootstrap 部分中不起作用

html - 按钮和视频在 HTML/Bootstrap 部分中不起作用

问题描述

我正在为我所在的一个组织开发一个网站，并且我正在使用bootstrap我HTML的 for CSS. 但是，在一个页面上，我想youtube链接一个视频和一个指向外部网站的按钮。

当我有代码时，如下所示，当您单击视频或按钮时，没有任何反应。我已经能够确定似乎使它起作用的唯一方面是当我注释掉页面的部分时。完成后，视频和按钮将起作用。但是，没有其他更改有效。

任何人都可以提供任何帮助来完成这些工作吗？谢谢。

<section class="page-section cta">
    <div class="container">
      <div class="row">
        <div class="col-xl-10 mx-auto">
          <div class="cta-inner text-center rounded">
            <h2 class="section-heading mb-5">
      <span class="section-heading-lower">Can't Visit Campus?</span>
      <br>
      <span class="section-heading-upper"><b>Take a Virtual Tour of the Mechanical Engineering Building with our Ambassadors in the Video Below!</span>
      <br>
      </a>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/Y9oIY5Znsi0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
        </iframe>
      <br>
      <br>
      <span class="section-heading-upper"><b>Schedule a Virtual Meeting with an Ambassador</span>
      <br>
      <div class="intro-button mx-auto">
      <a class="btn btn-primary btn-xl" href="(Website link goes here but is removed for privacy)">Sign Up Here</a>
      </div>
    </div>
  </div>
</div>
</div>
</section>

标签： htmlcss

解决方案

链接应该是父元素。把外面这样包起来……

<a class="btn btn-primary btn-xl" href="(Website link goes here but is removed for privacy)"> <iframe width="560"
    height="315" src="https://www.youtube.com/embed/Y9oIY5Znsi0" frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
  </iframe>
  <br>
  <br>
  <span class="section-heading-upper"><b>Schedule a Virtual Meeting with an Ambassador</span>
  <br>
  <div class="intro-button mx-auto">
    Sign Up Here
</a>
</div>
</div>
</div>
</div>
</div>
</section>

推荐阅读