// Demo: https://jsfiddle.net/baivong/a4z0hz63/embedded/result,html,js/ jQuery(function() { 'use strict'; // Giphy image in post var $giphyImg = $('.postbody, .post-entry').find('img[src*=".giphy.com/media/"][src$="giphy.gif"]'); if (!$giphyImg.length) return; // Add style to player like Facebook $('head').append($('', { text: '.gifactif_icon_bg,.gifactif_icon_load,.gifactif_icon_text{background-image:url(//i.imgur.com/VvrpCQJ.png);background-repeat:no-repeat;background-size:auto;left:50%;top:50%;cursor:pointer}.gifactif_wrap{position:relative;display:inline-block}.gifactif_icon_bg{background-position:0 0;height:72px;margin-left:-36px;margin-top:-36px;position:absolute;width:72px}.gifactif_icon_load{background-position:0 -73px;height:66px;margin-left:-33px;margin-top:-33px;position:absolute;width:66px}.rotate-spinner{-webkit-animation:rotateSpinner 2.5s linear infinite;animation:rotateSpinner 2.5s linear infinite}.gifactif_icon_text{background-position:0 -140px;height:17px;margin-left:-16px;margin-top:-9px;position:absolute;width:32px}.gifactif_external{display:block;background:url(//i.imgur.com/1yqUihp.png) repeat-x;bottom:0;color:#fff;font-size:11px;-webkit-font-smoothing:antialiased;font-weight:700;height:56px;left:0;position:absolute;right:0;text-align:left;text-shadow:0 1px 4px rgba(0,0,0,.4);text-transform:uppercase;white-space:nowrap}.gifactif_external_text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;bottom:9px;left:11px;max-width:400px;position:absolute;vertical-align:top;color:#fff}.gifactif_external_icon{width:24px;height:24px;background-image:url(//i.imgur.com/VvrpCQJ.png);background-size:auto;background-repeat:no-repeat;display:inline-block;background-position:0 -158px;bottom:9px;position:absolute;right:10px}.gifactif_player,.gifactif_poster{max-width:100%}.gifactif_cover{display:block}.gifactif_player,.gifactif_video .gifactif_cover{display:none}.gifactif_video .gifactif_player{display:block}@-webkit-keyframes rotateSpinner{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotateSpinner{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}' })); // Replace GIF image to player like Facebook $giphyImg.replaceWith(function() { var imgUrl = this.src, pre = imgUrl.replace(/\.gif$/, ''); return '
'; }); // Click on player $('.gifactif_wrap').on('click', function(e) { var $this = $(this), $cover = $this.find('.gifactif_cover'), $video = $this.find('.gifactif_player'), $poster = $this.find('.gifactif_poster'), $loader = $this.find('.gifactif_icon_load'), pre = $this.data('pre'); // Skip external url if (e.target.className === 'gifactif_cover gifactif_external') return; if (e.target.tagName !== 'VIDEO') { if (!$video.length) { // Generate video player $video = $('', { class: 'gifactif_player', poster: pre + '_s.gif', loop: 'loop', muted: 'muted', width: $poster.width(), height: $poster.height(), html: '