daily pastebin goal
1%
SHARE
TWEET

Untitled

a guest Mar 25th, 2019 55 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!doctype html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <title>Movie Watcher</title>
  6.  
  7.     <link rel="stylesheet" type="text/css" href="http://www.teaching-materials.org/common/css/bootstrap.min.css">
  8.  
  9.     <style type="text/css">
  10.       /* This puts titles always on a separate line from thumbnails */
  11.       #videos-list img {
  12.         display: block;
  13.       }
  14.       .red {
  15.         color: red;
  16.       }
  17.     </style>
  18.   </head>
  19.  
  20.   <body>
  21.  
  22.     <div class="container">
  23.  
  24.       <div class="row">
  25.         <div class="col-md-12">
  26.           <h1 class="page-header">Best Videos Ever ❤</h1>
  27.         </div>
  28.       </div>
  29.  
  30.       <div class="row">
  31.         <div class="col-md-3">
  32.           <ul id="videos-list">
  33.           </ul>
  34.         </div>
  35.  
  36.         <div class="col-md-9" id="video-watcher">
  37.         </div>
  38.       </div>
  39.  
  40.     </div>
  41.  
  42.     <script type="text/javascript" src="http://www.teaching-materials.org/common/youtube.js"></script>
  43.     <script type="text/javascript" src="http://www.teaching-materials.org/common/js/jquery.min.js"></script>
  44.  
  45.     <script>
  46.       var videos = [
  47.         {
  48.           "youtubeId": "6hB3S9bIaco",
  49.           "title": "The Shawshank Redemption",
  50.           "author": "ryy79",
  51.           "theme": "horror",
  52.           "fav": true
  53.         },
  54.         {
  55.           "youtubeId": "sY1S34973zA",
  56.           "title": "The godfather",
  57.           "author": "ryy79",
  58.           "theme": "action",
  59.           "fav": true
  60.         },
  61.         {
  62.           "youtubeId": "6hB3S9bIaco",
  63.           "title": "The Shawshank Redemption",
  64.           "author": "ryy79",
  65.           "theme": "horror",
  66.           "fav": true
  67.         },
  68.         {
  69.           "youtubeId": "6hB3S9bIaco",
  70.           "title": "The Shawshank Redemption",
  71.           "author": "ryy79",
  72.           "theme": "horror",
  73.           "fav": true
  74.         },
  75.         {
  76.           "youtubeId": "6hB3S9bIaco",
  77.           "title": "The Shawshank Redemption",
  78.           "author": "ryy79",
  79.           "theme": "horror",
  80.           "fav": true
  81.         },
  82.       ];
  83.  
  84.      var addVideoToList = function(video) {
  85.         $.getJSON('http://www.omdbapi.com/?apikey=280793d3&t='+video.title, function(json) {
  86.          console.log(json.imdbRating);
  87.           if (video.fav == true) {
  88.             var videoLink = $('<a>');
  89.           } else {
  90.             var videoLink = $('<a class="red">');
  91.           }
  92.          
  93.           videoLink.append(video.title);
  94.           var thumbnailUrl = youtube.generateThumbnailUrl(video.youtubeId);
  95.           var thumbnailImg = $('<img>');
  96.           thumbnailImg.attr('src', thumbnailUrl);
  97.           videoLink.append(thumbnailImg);
  98.  
  99.           videoLink.on('click', function(e) {
  100.               e.preventDefault();
  101.               console.log(video.title);
  102.               var videoEmbed = $('<iframe></iframe>');
  103.  
  104.              
  105.  
  106.               videoEmbed.attr('src', youtube.generateEmbedUrl(video.youtubeId));
  107.               videoEmbed.attr('width', 560);
  108.               videoEmbed.attr('height', 315);
  109.  
  110.               var videoWatcher = $('#video-watcher');
  111.               videoWatcher.hide();
  112.               videoWatcher.html('<h2>'+video.title+' - '+video.theme+'</h2>');
  113.               videoWatcher.append(videoEmbed);
  114.               videoWatcher.append('<h3>imdb rating: '+json.imdbRating+'</h3>');
  115.               videoWatcher.append('<h3>Plot</h3>'+'<p>'+json.Plot+'</p>');
  116.               videoWatcher.append('<h3>Actors</h3>'+'<p>'+json.Actors+'</p>');
  117.               videoWatcher.fadeIn();
  118.           });
  119.  
  120.           var videoItem = $('<li>');
  121.           videoItem.append(videoLink);
  122.           $('#videos-list').append(videoItem);
  123.         })
  124.        
  125.        
  126.      };
  127.  
  128.      for (var i = 0; i < videos.length; i++) {
  129.        addVideoToList(videos[i]);
  130.     }
  131.    </script>
  132.  
  133.   </body>
  134. </html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top