"Control Youtube Videos with Javascript"
Bootstrap 3.3.0 Snippet by Xevion

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>YoutubeAPI - Control Youtube Videos with JAVASCRIPT!</title> <link rel="stylesheet" href="demo.css" type="text/css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/styles/default.min.css"> <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/styles/tomorrow.min.css"> </head> <body bgcolor="#2C2C2C" id="body1"> <div id="video-placeholder"></div> <style type="text/css"> #video-placeholder { border: 1px #2C2C2C solid; } body,html{ overflow:hidden } #body1 { background: #0a0a0a; height: 1500px; } #play { position: fixed; left: 800px; color: #fff; text-decoration: none; text-shadow: 1px 1px 1px #000; top: 590px; } #pause { position: fixed; left: 700px; color: #fff; text-decoration: none; text-shadow: 1px 1px 1px #000; top: 590px; } #mute-toggle { position: fixed; left: 750px; color: #fff; text-decoration: none; text-shadow: 1px 1px 1px #000; top: 590px; } #timetime { position: fixed; font-family: Roboto; left: 735px; top: 535px; color: #fff; text-decoration: none; text-shadow: 1px 1px 1px #000; top: 625px; } .material-icons.custom { color: #fff; } #next { position: fixed; left: 850px; bottom: 263px; color: #fff; text-decoration: none; text-shadow: 1px 1px 1px #000; top: 590px; } #prev { position: fixed; left: 650px; bottom: 263px; color: #fff; text-decoration: none; text-shadow: 1px 1px 1px #000; top: 590px; } #e1 { position: fixed; left: 50px; top: 20px; } #e2 { position: fixed; left: 50px; top: 230px; } #e3 { position: fixed; left: 50px; top: 430px; } #text { position: fixed; left: 400px; bottom: 263px; color: #2C2C2C; text-decoration: none; text-shadow: 1px 1px 1px #000; top: 700px; } </style> <div id="controls"> <p style="color: #2C2C2C;" id="timetime"><span id="current-time">0:00</span> / <span id="duration">0:00</span></p> <i style="color: #2C2C2C;" id="play" class="fa fa-play"></i> <i style="color: #2C2C2C;" id="pause" class="fa fa-pause"></i> <i style="color: #2C2C2C;" id="mute-toggle" class="fa fa-volume-up"></i> <i style="color: #2C2C2C;" id="next" class="fa fa-forward"></i> <i style="color: #2C2C2C;" id="prev" class="fa fa-backward"></i> <img id="e2" class="thumbnail" src="http://img.youtube.com/vi/Mh64-FRUEog/hqdefault.jpg" data-video-id="Mh64-FRUEog" title="Mh64-FRUEog"> <img id="e1" class="thumbnail" src="http://img.youtube.com/vi/92yHw3WEMZU/hqdefault.jpg" data-video-id="92yHw3WEMZU" title="92yHw3WEMZU"> <img id="e3" class="thumbnail" src="http://img.youtube.com/vi/N2yXLkg3Ltg/hqdefault.jpg" data-video-id="N2yXLkg3Ltg" title="N2yXLkg3Ltg"> </div> </p> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/highlight.min.js"></script> <script src="https://www.youtube.com/iframe_api"></script> </body> </html>
*{ margin: 0; padding: 0; box-sizing: border-box; } html{ background-color: #eee; } body{ font: normal 14px sans-serif; } header{ box-sizing: border-box; text-align: center; width: 100%; padding: 25px 40px; background-color: #3A56B7; overflow: hidden; } header h1{ float: left; font: normal 24px/1.5 'Open Sans', sans-serif; color: #fff; } header a{ color:#fff; float: right; text-decoration: none; display: inline-block; padding: 13px 50px; border-radius: 3px; font: bold 14px/1 'Open Sans', sans-serif; text-transform: uppercase; background-color:#F05283; } #video-placeholder{ position: relative; left: 300px; } #controls{ margin-right: 40%; } #controls ul{ list-style: none; } #controls pre{ border: 6px solid #E7E9F3; box-shadow: 0 1px 2px rgba(0,0,0,0.2); } #controls ul li { margin: 40px; } #controls ul li code{ padding: 24px; line-height: 1.45; font-size: 13px; } h2{ display: block; margin-bottom: 24px; font-size: 26px; color: #43495F; } h2 ~ * { margin-bottom: 24px; } h2 + pre { margin-top: 36px; } .thumbnail{ cursor: pointer; margin: 0 10px 20px 0; border: 6px solid #2C2C2C; box-shadow: 0 1px 2px #1B1B1B; width: 200px; } #progress-bar{ position: relative; width: 100%; height: 20px; cursor: pointer; } #controls i { color: #000; font-size: 32px; cursor: pointer; } #volume-input{ height: 32px; width: 45px; } #next, #prev{ display: block; } @media (max-width: 1000px) { header h1{ float: none; } header a{ margin-top: 25px; float: none; } } @media (max-width: 1200px) { #video-placeholder{ max-width: 100%; position: static; } #controls{ margin-right: 0; } #bsaHolder{ display:none;} }
var player, time_update_interval = 0; function onYouTubeIframeAPIReady() { player = new YT.Player('video-placeholder', { width: 1000, height: 580, videoId: '92yHw3WEMZU', playerVars: { color: 'red', controls: 0, iv_load_policy: 3, playlist: 'Mh64-FRUEog,N2yXLkg3Ltg' }, events: { onReady: initialize } }); } function initialize(){ // Update the controls on load updateTimerDisplay(); updateProgressBar(); // Clear any old interval. clearInterval(time_update_interval); // Start interval to update elapsed time display and // the elapsed part of the progress bar every second. time_update_interval = setInterval(function () { updateTimerDisplay(); updateProgressBar(); }, 1000); $('#volume-input').val(Math.round(player.getVolume())); } // This function is called by initialize() function updateTimerDisplay(){ // Update current time text display. $('#current-time').text(formatTime( player.getCurrentTime() )); $('#duration').text(formatTime( player.getDuration() )); } // This function is called by initialize() function updateProgressBar(){ // Update the value of our progress bar accordingly. $('#progress-bar').val((player.getCurrentTime() / player.getDuration()) * 100); } // Progress bar $('#progress-bar').on('mouseup touchend', function (e) { // Calculate the new time for the video. // new time in seconds = total duration in seconds * ( value of range input / 100 ) var newTime = player.getDuration() * (e.target.value / 100); // Skip video to new time. player.seekTo(newTime); }); // Playback $('#play').on('click', function () { player.playVideo(); }); $('#pause').on('click', function () { player.pauseVideo(); }); // Sound volume $('#mute-toggle').on('click', function() { var mute_toggle = $(this); if(player.isMuted()){ player.unMute(); mute_toggle.addClass('fa-volume-up') mute_toggle.removeClass('fa-volume-off') } else{ player.mute(); mute_toggle.addClass('fa fa-volume-off'); mute_toggle.removeClass('fa-volume-up') } }); $('#volume-input').on('change', function () { player.setVolume($(this).val()); }); // Other options $('#speed').on('change', function () { player.setPlaybackRate($(this).val()); }); $('#quality').on('change', function () { player.setPlaybackQuality($(this).val()); }); // Playlist $('#next').on('click', function () { player.nextVideo() }); $('#prev').on('click', function () { player.previousVideo() }); // Load video $('.thumbnail').on('click', function () { var url = $(this).attr('data-video-id'); player.cueVideoById(url); }); // Helper Functions function formatTime(time){ time = Math.round(time); var minutes = Math.floor(time / 60), seconds = time - minutes * 60; seconds = seconds < 10 ? '0' + seconds : seconds; return minutes + ":" + seconds; } $('pre code').each(function(i, block) { hljs.highlightBlock(block); });

Related: See More


Questions / Comments:

Hello Friend

I really enjoyed your work, and as I have no experience with html, css and java, because I am learning these languages ​​yet.

How do I do a job like this or at least look like and why on my project?

Thank you!!

Att.

Clayton

Claytoncfd (-2) - 5 years ago - Reply -2