Question

我设置了一个带有引导程序模板的页面。我通过复制index.html

生成了一些子页面

我想在其中一个子页面上播放YouTube视频。我尝试了很多代码示例，但我只得到一个看起来正确的结果，但视频被冻结/锁定

<!doctype html>
<!--[if IE 7 ]>    <html lang="en-gb" class="isie ie7 oldie no-js"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en-gb" class="isie ie8 oldie no-js"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en-gb" class="isie ie9 no-js"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html lang="en-gb" class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!--[if lt IE 9]>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <![endif]-->
<title>Los Angeles Teacher</title>
<meta name="description" content="">
<meta name="author" content="WebThemez">
<!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
<!--[if lte IE 8]>
        <script type="text/javascript" src="http://explorercanvas.googlecode.com/svn/trunk/excanvas.js"></script>
    <![endif]-->
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/isotope.css" media="screen" />
<link rel="stylesheet" href="js/fancybox/jquery.fancybox.css" type="text/css" media="screen" />
<link href="css/animate.css" rel="stylesheet" media="screen">
<link href="flexslider/flexslider.css" rel="stylesheet" />
<link href="js/owl-carousel/owl.carousel.css" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css" />
<!-- Font Awesome -->
<link href="font/css/font-awesome.min.css" rel="stylesheet">
</head>

<body>
<header class="header">
  <div class="container">
    <nav class="navbar navbar-inverse" role="navigation">
      <div class="navbar-header">
        <button type="button" id="nav-toggle" class="navbar-toggle" data-toggle="collapse" data-target="#main-nav"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
        <a href="index.html" class="navbar-brand scroll-top logo  animated bounceInLeft"><b><i>Los Angeles Teacher</i></b></a> </div>
      <!--/.navbar-header-->
      <div id="main-nav" class="collapse navbar-collapse">
        <ul class="nav navbar-nav" id="mainNav">
          <li class="active" id="firstLink"><a href="index.html" class="scroll-link">Home</a></li>
          <li><a href="index.html" class="scroll-link">Subjects</a></li>
          <li><a href="index.html" class="scroll-link">Qualifications & Lesson Details</a></li>
          <li><a href="index.html" class="scroll-link">Rates</a></li>
          <li><a href="index.html" class="scroll-link">Contact Us</a></li>
        </ul>
      </div>
      <!--/.navbar-collapse-->
    </nav>
    <!--/.navbar-->
  </div>
  <!--/.container-->
</header>
<!--/.header-->
<div id="#top"></div>
<section id="home">
  <div class="banner-container">

<section id="work" class="page-section page">
  <div class="container text-center">
    <div class="heading">

      <p><br>Learning theory allows new players to <strong>recognize</strong>, <strong>differentiate</strong>, and <strong>prioritize</strong>, <strong>patterns</strong>. First learning theory, a player will process chess theory patterns individually. A player's skill develops as they integrate these pattern processes over time. Learning theory promotes a player's ability to create and critically evaluate strategy.

<br/><br/>Theory promotes understanding of the mechanisms behind wins, losses, and draws. Using theory, players can convert losses in to learning tools.

<br/><br/>Learning theory has applications beyond chess. Anything reliant on pattern recognition, like video games, or music theory, is indirectly improved by learning chess theory. In addition, theory develops a person's intuitive use of a "Deming Cycle".</font><br/><br><img src="demingcycle.png"/><br><br><br><br><h2>Resources</h2>
<img src="chess3.jpg"/><br>
<br>
<img src="chess.gif"/><br>
<br>
<img src="chess.jpg"/><br>
<br>
<img src="brooklyncastle.jpg"/><br>
<br>
<a href="http://www.instantchess.com" target="_blank">
 <img src="instantchess.jpg" />
</a><br>
    </div>
  </div>
</section>
<section id="team" class="page-section">
  <div class="container">
    <div class="heading text-center">
      <!-- Heading -->

<!--/.page-section-->
<section class="copyright">
  <div class="container">
    <div class="row">
      <div class="col-sm-12 text-center"> Copyright 2015 | All Rights Reserved -- Los Angeles Teacher.com </div>
    </div>
    <!-- / .row -->
  </div>
</section>
<a href="index.html" class="topHome"><i class="fa fa-chevron-up fa-2x"></i></a>

<!--[if lte IE 8]><script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script><![endif]-->
<script src="js/modernizr-latest.js"></script>
<script src="js/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/jquery.isotope.min.js" type="text/javascript"></script>
<script src="js/fancybox/jquery.fancybox.pack.js" type="text/javascript"></script>
<script src="js/jquery.nav.js" type="text/javascript"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
<script src="js/gmaps.js"></script>
<script src="js/jquery.fittext.js"></script>
<script src="js/waypoints.js"></script>
<script src="flexslider/jquery.flexslider.js"></script>
<script src="js/custom.js" type="text/javascript"></script>
<script src="js/owl-carousel/owl.carousel.js"></script>
</body>
</html>

Answer 1

我认为你可能会在某处出现轻微的语法错误。它对我很有用：

https://jsfiddle.net/k5bd4ahg/

视频代码：

<iframe width="420" height="315"
    src="https://www.youtube.com/embed/Qc_v9mTfhC8">
</iframe>

在Bootstrap网站子页面上嵌入YouTube视频

1 个答案: