Question

这是一个类项目的Netflix类型网站。我希望我的用户能够点击电影图像，youTube的预告片会在我网页顶部的视频占位符中播放。我已经在网上看了几天，但我无法弄清楚如何实现这一目标。你能救我吗？

<!DOCTYPE html>
<!--
CIS213 Javascript Final Project
Author:     VH
Date:       11/14/2016
Filename:   index.html
-->
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="myCinema.css">
    <title>My Cinema Movies</title>
    <!-- Empty script for now-->
    <script src="https://www.youtube.com/iframe_api"> /* <![CDATA[ */ /* ]]> */ </script>
  </head>
  <body>
    <div>
      <form method="link" action="registration.html" >
        <h1>
          My Cinema 
          <button class="button" type="registration" formtarget="registration.html">Register</button>
          <input type="text" id="search" name="search" placeholder="Movies" onclick="registration();"/>
        </h1>
      </form>
    </div>
    <!--This <div> is for my placeholder where I want my trailers to play. -->
    <div class="movieTrailer">
      <iframe frameborder="0" height="100%" width="100%" src="https://youtube.com/embed/XQu8TTBmGhA?autoplay=1&controls=0&showinfo=0&autohide=1version=3&loop=1&playlist=AMgyWT075KY">
      </iframe>
    </div>
    <div class="movieImages">
      <div>
        <h2>Family</h2>
      </div>
      <a href="https://www.youtube.com/watch?v=UGWv91YZua4">
        <img class="resize"src="dory.jpg" alt="Finding Dory">
      </a>
      <img class="resize" src="moana.jpg" alt="Moana"/>
      <img class="resize" src="jungle.jpg" alt="Jungle Book"/>
      <img class="resize" src="men.jpg" alt="Little Men"/>
      <img class="resize"src="ice.jpg" alt="Ice Age"/>
      <img class="resize"src="sing.jpg" alt="Sing"/>
      <!--<img class="resize" src="arlo.jpg" alt="Arlo the Burping Pig"/>-->
      <div>
        <h2>Action</h2>
      </div>
      <img class="resize" src="twice.jpg" alt="Don't Think Twice"/>
      <img class="resize" src="arrival.jpg" alt="Arrival"/>
      <img class="resize" src="girl.jpg" alt="The Girl on the Train"/>
      <img class="resize" src="mag7.jpg" alt="The Magnificent 7"/>
      <img class="resize" src="ride.jpg" alt="Ride Along 2"/>
      <img class="resize" src="bleed.jpg" alt="Bleed for This"/>
      <!--<img class="resize" src="angry.jpg" alt="Angry Birds the Movie"/>-->
      <div>
        <h2>Drama</h2>
      </div>
      <img class="resize" src="harry.jpg" alt="Harry and the Snowman"/>
      <img class="resize" src="globe.jpg" alt="Richard II"/>
      <img class="resize" src="kicks.jpg" alt="Kicks"/>
      <img class="resize" src="middle.jpg" alt="Middle of Nowhere"/>
      <img class="resize" src="mrPete.jpg" alt="Mr & Pete"/>
      <img class="resize" src="ove.jpg" alt="A Man Called Ove"/>
      <!--<img class="resize" src="sully.jpg" alt="Sully"/>-->
    </div>
  </body>
</html>

如何在占位符中播放视频？

0 个答案: