|
(→Actualizar Acumulados del Empleado)
|
(→Actualizar Acumulados del Empleado)
|
| Line 10: | |||
| <div class="youtube" id="_Jmisv1Spck"></div> | <div class="youtube" id="_Jmisv1Spck"></div> | ||
| - | <div class="popup-youtube" href="https://www.youtube.com/watch?v=CIV6o2qEKVM"> | ||
| - | <img class="img-fluid" src="images/video-frame.svg" alt="alternative"> | ||
| - | <span class="video-play-button"> | ||
| - | <span></span> | ||
| - | </span> | ||
| <script> | <script> | ||
| - | $('.popup-youtube, .popup-vimeo').magnificPopup({ | + | |
| - | disableOn: 700, | + | // Find all the YouTube video embedded on a page |
| - | type: 'iframe', | + | var videos = document.getElementsByClassName("youtube"); |
| - | mainClass: 'mfp-fade', | ||
| - | removalDelay: 160, | + | for (var i=0; i<videos.length; i++) { |
| - | preloader: false, | ||
| - | fixedContentPos: false, | + | var youtube = videos[i]; |
| - | iframe: { | ||
| - | patterns: { | + | // Based on the YouTube ID, we can easily find the thumbnail image |
| - | youtube: { | + | var img = document.createElement("img"); |
| - | index: 'youtube.com/', | + | img.setAttribute("src", "http://i.ytimg.com/vi/" |
| - | id: function(url) { | + | + youtube.id + "/hqdefault.jpg"); |
| - | var m = url.match(/[\\?\\&]v=([^\\?\\&]+)/); | + | img.setAttribute("class", "thumb"); |
| - | if ( !m || !m[1] ) return null; | ||
| - | return m[1]; | ||
| - | }, | + | // Overlay the Play icon to make it look like a video player |
| - | src: 'https://www.youtube.com/embed/%id%?autoplay=1' | + | var circle = document.createElement("div"); |
| - | }, | + | circle.setAttribute("class","circle"); |
| - | vimeo: { | ||
| - | index: 'vimeo.com/', | + | youtube.appendChild(img); |
| - | id: function(url) { | + | youtube.appendChild(circle); |
| - | var m = url.match(/(https?:\/\/)?(www.)?(player.)?vimeo.com\/([a-z]*\/)*([0-9]{6,11})[?]?.*/); | ||
| - | if ( !m || !m[5] ) return null; | + | // Attach an onclick event to the YouTube Thumbnail |
| - | return m[5]; | + | youtube.onclick = function() { |
| - | }, | ||
| - | src: 'https://player.vimeo.com/video/%id%?autoplay=1' | + | // Create an iFrame with autoplay set to true |
| - | } | + | var iframe = document.createElement("iframe"); |
| - | } | + | iframe.setAttribute("src", |
| - | } | + | "https://www.youtube.com/embed/" + this.id |
| - | }); | + | + "?autoplay=1&autohide=1&border=0&wmode=opaque&enablejsapi=1"); |
| + | // The height and width of the iFrame should be the same as parent | ||
| + | iframe.style.width = this.style.width; | ||
| + | iframe.style.height = this.style.height; | ||
| + | // Replace the YouTube thumbnail with YouTube HTML5 Player | ||
| + | this.parentNode.replaceChild(iframe, this); | ||
| + | }; | ||
| + | } | ||
| </script> | </script> | ||