WILDAN_IZZUDIN

BODY BACKROUND VIDEO (JQUERY TUBULAR JS)

Jan 18th, 2018
378
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Underxploit Reborn</title>
  6.     <link href='http://fonts.googleapis.com/css?family=Bungee' rel='stylesheet' type='text/css'>
  7. <link href='http://fonts.googleapis.com/css?family=Josefin+Sans' rel='stylesheet' type='text/css'>
  8.     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
  9.     <script type="text/javascript" charset="utf-8">
  10.  /* jQuery tubular plugin
  11. |* by Sean McCambridge
  12. |* http://www.seanmccambridge.com/tubular
  13. |* version: 1.0
  14. |* updated: October 1, 2012
  15. |* since 2010
  16. |* licensed under the MIT License
  17. |* Enjoy.
  18. |*
  19. |* Thanks,
  20. |* Sean */
  21.  
  22. ;(function ($, window) {
  23.  
  24.     // test for feature support and return if failure
  25.    
  26.     // defaults
  27.     var defaults = {
  28.         ratio: 16/9, // usually either 4/3 or 16/9 -- tweak as needed
  29.         videoId: 'ZCAnLxRvNNc', // toy robot in space is a good default, no?
  30.         mute: true,
  31.         repeat: true,
  32.         width: $(window).width(),
  33.         wrapperZIndex: 99,
  34.         playButtonClass: 'tubular-play',
  35.         pauseButtonClass: 'tubular-pause',
  36.         muteButtonClass: 'tubular-mute',
  37.         volumeUpClass: 'tubular-volume-up',
  38.         volumeDownClass: 'tubular-volume-down',
  39.         increaseVolumeBy: 10,
  40.         start: 0
  41.     };
  42.  
  43.     // methods
  44.  
  45.     var tubular = function(node, options) { // should be called on the wrapper div
  46.         var options = $.extend({}, defaults, options),
  47.             $body = $('body') // cache body node
  48.             $node = $(node); // cache wrapper node
  49.  
  50.         // build container
  51.         var tubularContainer = '<div id="tubular-container" style="overflow: hidden; position: fixed; z-index: 1; width: 100%; height: 100%"><div id="tubular-player" style="position: absolute"></div></div><div id="tubular-shield" style="width: 100%; height: 100%; z-index: 2; position: absolute; left: 0; top: 0;"></div>';
  52.  
  53.         // set up css prereq's, inject tubular container and set up wrapper defaults
  54.         $('html,body').css({'width': '100%', 'height': '100%'});
  55.         $body.prepend(tubularContainer);
  56.         $node.css({position: 'relative', 'z-index': options.wrapperZIndex});
  57.  
  58.         // set up iframe player, use global scope so YT api can talk
  59.         window.player;
  60.         window.onYouTubeIframeAPIReady = function() {
  61.             player = new YT.Player('tubular-player', {
  62.                 width: options.width,
  63.                 height: Math.ceil(options.width / options.ratio),
  64.                 videoId: options.videoId,
  65.                 playerVars: {
  66.                     controls: 0,
  67.                     showinfo: 0,
  68.                     modestbranding: 1,
  69.                     wmode: 'transparent'
  70.                 },
  71.                 events: {
  72.                     'onReady': onPlayerReady,
  73.                     'onStateChange': onPlayerStateChange
  74.                 }
  75.             });
  76.         }
  77.  
  78.         window.onPlayerReady = function(e) {
  79.             resize();
  80.             if (options.mute) e.target.mute();
  81.             e.target.seekTo(options.start);
  82.             e.target.playVideo();
  83.         }
  84.  
  85.         window.onPlayerStateChange = function(state) {
  86.             if (state.data === 0 && options.repeat) { // video ended and repeat option is set true
  87.                player.seekTo(options.start); // restart
  88.             }
  89.         }
  90.  
  91.         // resize handler updates width, height and offset of player after resize/init
  92.         var resize = function() {
  93.             var width = $(window).width(),
  94.                 pWidth, // player width, to be defined
  95.                 height = $(window).height(),
  96.                 pHeight, // player height, tbd
  97.                 $tubularPlayer = $('#tubular-player');
  98.  
  99.             // when screen aspect ratio differs from video, video must center and underlay one dimension
  100.  
  101.             if (width / options.ratio < height) { // if new video height < window height (gap underneath)
  102.                pWidth = Math.ceil(height * options.ratio); // get new player width
  103.                $tubularPlayer.width(pWidth).height(height).css({left: (width - pWidth) / 2, top: 0}); // player width is greater, offset left; reset top
  104.            } else { // new video width < window width (gap to right)
  105.                pHeight = Math.ceil(width / options.ratio); // get new player height
  106.                $tubularPlayer.width(width).height(pHeight).css({left: 0, top: (height - pHeight) / 2}); // player height is greater, offset top; reset left
  107.            }
  108.  
  109.        }
  110.  
  111.        // events
  112.        $(window).on('resize.tubular', function() {
  113.            resize();
  114.        })
  115.  
  116.        $('body').on('click','.' + options.playButtonClass, function(e) { // play button
  117.            e.preventDefault();
  118.            player.playVideo();
  119.        }).on('click', '.' + options.pauseButtonClass, function(e) { // pause button
  120.            e.preventDefault();
  121.            player.pauseVideo();
  122.        }).on('click', '.' + options.muteButtonClass, function(e) { // mute button
  123.            e.preventDefault();
  124.            (player.isMuted()) ? player.unMute() : player.mute();
  125.        }).on('click', '.' + options.volumeDownClass, function(e) { // volume down button
  126.            e.preventDefault();
  127.            var currentVolume = player.getVolume();
  128.            if (currentVolume < options.increaseVolumeBy) currentVolume = options.increaseVolumeBy;
  129.            player.setVolume(currentVolume - options.increaseVolumeBy);
  130.        }).on('click', '.' + options.volumeUpClass, function(e) { // volume up button
  131.            e.preventDefault();
  132.            if (player.isMuted()) player.unMute(); // if mute is on, unmute
  133.            var currentVolume = player.getVolume();
  134.            if (currentVolume > 100 - options.increaseVolumeBy) currentVolume = 100 - options.increaseVolumeBy;
  135.             player.setVolume(currentVolume + options.increaseVolumeBy);
  136.         })
  137.     }
  138.  
  139.     // load yt iframe js api
  140.  
  141.     var tag = document.createElement('script');
  142.     tag.src = "//www.youtube.com/iframe_api";
  143.     var firstScriptTag = document.getElementsByTagName('script')[0];
  144.     firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  145.  
  146.     // create plugin
  147.  
  148.     $.fn.tubular = function (options) {
  149.         return this.each(function () {
  150.             if (!$.data(this, 'tubular_instantiated')) { // let's only run one
  151.                 $.data(this, 'tubular_instantiated',
  152.                 tubular(this, options));
  153.             }
  154.         });
  155.     }
  156.  
  157. })(jQuery, window);
  158.     </script>
  159.     <script type="text/javascript" charset="utf-8">
  160.         $().ready(function() {
  161.             $('#wrapper').tubular({videoId: 'RfBHSSNNEmA', mute: false, ratio: 4/3});
  162.         });
  163.     </script>
  164.     <style>
  165. *{
  166.         padding: 0;margin: 0;
  167.     }
  168. body {
  169.  
  170.     text-align: center;
  171. }
  172.  
  173. h1 {
  174.     font-family: 'Bungee', cursive;
  175.     color: white;
  176.     text-transform: uppercase;
  177.     letter-spacing: 0.015em;
  178.     text-align: center;
  179.     font-size: 4em;
  180.     margin-bottom: 0%;
  181. }
  182.     hr {
  183.         content: '';
  184.         width: 15%;
  185.         display: block;
  186.         background: #fff;
  187.         height: 10px;
  188.         margin: 10px auto;
  189.         line-height: 1.1;
  190.         border-radius: 50px;
  191.                border:0px;
  192.  
  193. }
  194.  
  195. p {
  196.     color: white;
  197.     font-size: 32px;
  198.     text-align: center;
  199.     font-family: 'Josefin Sans', sans-serif;
  200. }
  201.  
  202. a {
  203.     text-decoration: none;
  204.     color: white;
  205.     font-family: 'Josefin Sans', sans-serif;
  206.     font-size: 24px;
  207.     display: inline-block;
  208.     padding: 15px 30px;
  209.     border: 2px solid #fff;
  210.     text-transform: uppercase;
  211.     letter-spacing: 0.015em;
  212.     margin-top: 2%;
  213.     transition-duration: 0.8s;
  214.     &:hover {
  215.         color: lightgreen;
  216.         border-color: lightgreen;
  217.         border-radius: 2px;
  218.         transition-duration: 0.8s;
  219.     }
  220. }
  221.     </style>
  222. </head>
  223. <body>
  224. <div id="wrapper">
  225. <br><br><br><br><br><br><br>
  226. <h1 id="rightwrite">UNDERXPLOIT REBORN</h1>
  227.  <hr><br>
  228. <p>Web Programming & Technologi Information</p>
  229. <a href="https://underxploit.blospot.com">VISIT OFFICIAL BLOG</a>
  230.  
  231. </div>
  232.  
  233.  
  234. <script type="text/javascript">
  235.  
  236. $(document).ready(function() {
  237.  
  238.    function pulsate() {
  239.  
  240.        $("#rightwrite").animate({ opacity: 0.2 }, 1200, 'linear')
  241.  
  242.                     .animate({ opacity: 1 }, 1200, 'linear', pulsate)
  243.  
  244.                     .click(function() {
  245.  
  246.                         $(this).animate({ opacity: 1 }, 1200, 'linear');
  247.  
  248.                          $(this).stop();
  249.  
  250.                      });
  251.  
  252.         }
  253.  
  254.  
  255.  
  256.     pulsate();
  257.  
  258. });
  259.  
  260. </script>
  261. </body>
  262. </html>
RAW Paste Data