Movie Trailer Page example

Movie Website Mini-Project

Generate an HTML file that plays movie trailers

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Fresh Tomatoes!</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
    <script src="https://code.jquery.com/jquery-2.1.4.min.js" type="text/javascript"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <style type="text/css" media="screen">
        body {
            padding-top: 80px;
            margin-left: 2px;
            margin-right: 2px;
        }
        .hanging-close {
            position: absolute;
            top: -12px;
            right: -12px;
            z-index: 9001;
        }
        #trailer-video {
            width: 100%;
            height: 100%;
        }
        .scale-media {
            padding-bottom: 56.25%;
            position: relative;
        }
        .scale-media iframe {
            border: none;
            height: 100%;
            position: absolute;
            width: 100%;
            left: 0;
            top: 0;
            background-color: white;
        }
        .thumbnail:hover {
            background-color: #333;
            cursor: pointer;
        }
        .thumbnail{
            padding: 10px;
        }
        .popover-title{
            font-weight: bold;
            text-align: center;
        }
        /* centered columns styles see -> https://goo.gl/pv4oow */
        .row-centered {
            text-align:center;
        }
        .col-centered {
            display:inline-block;
            float:none;
            /* reset the text-align */
            text-align:left;
            /* inline-block space fix */
            margin-right:-15px;
        }
        .movie-btn{
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
    <script type="text/javascript" charset="utf-8">
        // Pause the video when the modal is closed
        $(document).on('click', '.hanging-close, .modal-backdrop, .modal', function (event) {
            // Remove the src so the player itself gets removed, as this is the only
            // reliable way to ensure the video stops playing in IE
            $("#trailer-video-container").empty();
        });
        // Start playing the video whenever the trailer modal is opened
        $(document).on('click', '.movie-img', function (event) {
            var trailerYouTubeId = $(this).attr('data-trailer-youtube-id')
            var sourceUrl = 'https://www.youtube.com/embed/' + trailerYouTubeId + '?autoplay=1&html5=1';
            $("#trailer-video-container").empty().append($("<iframe></iframe>", {
              'id': 'trailer-video',
              'type': 'text-html',
              'src': sourceUrl,
              'frameborder': 0
            }));
        });
        // Animate in the movies when the page loads
        $(document).ready(function () {
          var deferred = $.Deferred();
          $(".movie-btn").hide();
          var movie_tile_length = $('.movie-tile').length
          i = 0;
          $('.movie-tile').hide().first().show("fast", function showNext() {
            $(this).next("div").show("fast", showNext);
            i++;
            if(i == movie_tile_length)
                $(".movie-btn").show('slow');
            console.log(i);
          });
              
          //is_touch_device see -> https://stackoverflow.com/a/15691248/1815624
          var is_touch_device = ("ontouchstart" in window) || window.DocumentTouch && document instanceof DocumentTouch;
          $('[data-toggle="popover"]').popover({ html : true, trigger: is_touch_device ? "focus" : "hover focus"});
          
        });
        /**
         * Vertically center Bootstrap 3 modals
         * see -> https://gist.github.com/CrandellWS/8bcd88c6eca4a8260e16
         */
        $(function() {
            function reposition() {
                var modal = $(this),
                    dialog = modal.find('.modal-dialog');
                modal.css('display', 'block');
                dialog.css("margin-top", Math.max(0, ($(window).height() - dialog.height()) / 2));
            }
            $('.modal').on('show.bs.modal', reposition);
            $(window).on('resize', function() {
                $('.modal:visible').each(reposition);
            });
        });
    </script>
</head>

<div class="container">
      <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
          <div class="navbar-header">
            <a class="navbar-brand" href="#">Fresh Tomatoes Movie Trailers</a>
          </div>
        </div>
      </div>
    </div>
    <div class="container">
        <div class="row row-centered">
          
<div class="col-md-3 col-sm-4 col-xs-6 col-centered movie-tile">
    <div class="thumbnail">
        <img class="img-responsive movie-img" src="https://upload.wikimedia.org/wikipedia/en/d/d4/Divergent.jpg" alt="Divergent" data-trailer-youtube-id="336qJITnDi0" data-toggle="modal" data-target="#trailer">
        <button class="btn btn-sm btn-block movie-btn" data-toggle="popover" data-placement="top auto" title="Divergent" data-content="<p>A thrilling action-adventure film set in a world where people are divided into distinct factions based on human virtues.</p>">Divergent</button>
    </div>
</div>

<div class="col-md-3 col-sm-4 col-xs-6 col-centered movie-tile">
    <div class="thumbnail">
        <img class="img-responsive movie-img" src="https://upload.wikimedia.org/wikipedia/en/a/af/Insurgent_poster.jpg" alt="The Divergent Series: Insurgent" data-trailer-youtube-id="sX9-l0iO5w4" data-toggle="modal" data-target="#trailer">
        <button class="btn btn-sm btn-block movie-btn" data-toggle="popover" data-placement="top auto" title="The Divergent Series: Insurgent" data-content="<p>Insurgent raises the stakes for Tris as she searches for allies and answers in the ruins of a futuristic Chicago.</p>">The Divergent Series: Insurgent</button>
    </div>
</div>

<div class="col-md-3 col-sm-4 col-xs-6 col-centered movie-tile">
    <div class="thumbnail">
        <img class="img-responsive movie-img" src="https://upload.wikimedia.org/wikipedia/en/f/f8/Allegiantfilmposter.jpg" alt="The Divergent Series: Allegiant" data-trailer-youtube-id="5PSNL1qE6VY" data-toggle="modal" data-target="#trailer">
        <button class="btn btn-sm btn-block movie-btn" data-toggle="popover" data-placement="top auto" title="The Divergent Series: Allegiant" data-content="<p>After the earth-shattering revelations of INSURGENT, Tris must escape with Four and go beyond the wall enclosing Chicago.</p>">The Divergent Series: Allegiant</button>
    </div>
</div>

<div class="col-md-3 col-sm-4 col-xs-6 col-centered movie-tile">
    <div class="thumbnail">
        <img class="img-responsive movie-img" src="https://www.thedivergentseries.movie/ascendant/assets/img/poster/poster.jpg" alt="The Divergent Series: Ascendant" data-trailer-youtube-id="6DWqWGwIATQ" data-toggle="modal" data-target="#trailer">
        <button class="btn btn-sm btn-block movie-btn" data-toggle="popover" data-placement="top auto" title="The Divergent Series: Ascendant" data-content="<p>After Allegiant is Ascendant which is to arrive in 2017</p>">The Divergent Series: Ascendant</button>
    </div>
</div>

<div class="col-md-3 col-sm-4 col-xs-6 col-centered movie-tile">
    <div class="thumbnail">
        <img class="img-responsive movie-img" src="https://upload.wikimedia.org/wikipedia/en/2/29/Startrekposter.jpg" alt="Star Trek" data-trailer-youtube-id="iGAHnZ555nI" data-toggle="modal" data-target="#trailer">
        <button class="btn btn-sm btn-block movie-btn" data-toggle="popover" data-placement="top auto" title="Star Trek" data-content="<p>The greatest adventure of all time begins with Star Trek, the incredible story of a young crew's maiden voyage onboard the most advanced starship ever created: the U.S.S. Enterprise.</p>">Star Trek</button>
    </div>
</div>

<div class="col-md-3 col-sm-4 col-xs-6 col-centered movie-tile">
    <div class="thumbnail">
        <img class="img-responsive movie-img" src="https://upload.wikimedia.org/wikipedia/en/5/50/StarTrekIntoDarkness_FinalUSPoster.jpg" alt="Star Trek Into Darkness" data-trailer-youtube-id="sJNyGFqgyag" data-toggle="modal" data-target="#trailer">
        <button class="btn btn-sm btn-block movie-btn" data-toggle="popover" data-placement="top auto" title="Star Trek Into Darkness" data-content="<p>When a ruthless mastermind, Khan (Benedict Cumberbatch,) declares a one-man war on the Federation, Captain Kirk (Chris Pine), Spock (Zachary Quinto), and the crew of the U.S.S. Enterprise set out on their most explosive manhunt of all time.</p>">Star Trek Into Darkness</button>
    </div>
</div>

</div>
    </div>
  </body>
</html>

https://code.jquery.com/jquery-2.1.4.min.js

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js