- Generate an HTML file that plays movie trailers
Last active
March 14, 2019 23:04
-
-
Save CrandellWS/2e7d918cbae163ca9c1b to your computer and use it in GitHub Desktop.
Movie Trailer Page example
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Fresh Tomatoes!</title> | |
| <!-- Bootstrap 3 --> | |
| <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 -> http://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 = 'http://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 -> http://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> | |
| <body> | |
| <!-- Trailer Video Modal --> | |
| <div class="modal " id="trailer"> | |
| <div class="modal-dialog modal-lg"> | |
| <div class="modal-content"> | |
| <a href="#" class="hanging-close" data-dismiss="modal" aria-hidden="true"> | |
| <img src='data:image/x-png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAQAAABKfvVzAAAACXBIWXMAAAsTAAALEwEAmpwYAAABgElEQVQ4y72TPS9DYRiGr/dg5E+0/Q8MRBgkJho1iY+FjaHMIh2QMJgQCX/AgoVExEmbaGKxSHxUWqOxWqU4vQ3nnPZoNSae6bwn9/Xc7/PkfuHfSyHFZSuvvGzFFfpNbMtRsBzZTSEN14lrUPRnue61U8e8aFmPkhoQheRca0wxreuzKn/WgmKaUEaSwq7S8ohdrEvKQJpNKgCUWCEHlMgB7LlC4/bnDkvscQxAJ3OUSJADDDP0udqIyUArAENYYJjknTMgTRtPbl+mfDkMseY72PR4s1Rd+N4dIGW6fSBPh/+3whbn3vckg8HNFE17behqeSMCcIPTsH4XuPKPr6wGgDTb3sZqKhc49DxZ5Na7+wAA52zUXA7q1lokQRYwTNOP2OUEgC5maamu1QIwD6RgnywA4/QDhil6AbhwwZTJBKMRlvOmJY3qNJCkinYU06o+JClSn6aoVFKyIahHKkvSyE95japZjTR7EeEGCynp57Q5NK+kCiooqflfxH9SX7sUOLwGLpqpAAAAAElFTkSuQmCC' alt='Close' /> | |
| </a> | |
| <div class="scale-media" id="trailer-video-container"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Page Content --> | |
| <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="http://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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thank you SO SO MUCH for this! Had to do a project with something similar using OMDB and this helped me a ton with the modals. I hadn't use them before but your code was super helpful! :D 👏