Skip to content

Instantly share code, notes, and snippets.

@DevShahidul

DevShahidul/Youtube Custom play button.html

Last active May 26, 2018 05:50
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save DevShahidul/d87f82dbaf5ea012c6bc82e5c6de9f0d to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save DevShahidul/d87f82dbaf5ea012c6bc82e5c6de9f0d to your computer and use it in GitHub Desktop.
Download ZIP
See example here >>> https://codepen.io/romkaa/pen/JKqgmN and Live example in our Project here >>> http://webtricker.com/projects/electric-south/
Raw
Youtube Custom play button.html
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: avenir,sans-serif;
}
.video_wrapper {
width: 560px;
margin: 0 auto;
position: relative;
background-color: #000;
}
.video_wrapper_full {
padding-top: 315px;
}
.videoIframe {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
width: 100%;
height: 100%;
background-color: transparent;
}
.videoPoster {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-image:url(http://c.fastcompany.net/multisite_files/cocreate/imagecache/inline-large/inline/2013/01/1682283-inline-inline-2-music-veteran-amani-duncan-on-marketing-cf-martin-the-worlds-oldest-guitar-maker.jpg);
background-size: 100%;
border: none
text-indent: -999em;
overflow: hidden;
opacity: 1;
-webkit-transition: opacity 800ms, height 0s;
-moz-transition: opacity 800ms, height 0s;
transition: opacity 800ms, height 0s;
-webkit-transition-delay: 0s, 0s;
-moz-transition-delay: 0s, 0s;
transition-delay: 0s, 0s;
}
.videoPoster:hover {
cursor: pointer;
}
.videoPoster:before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 80px;
height: 80px;
margin: -40px 0 0 -40px;
border: 5px solid #fff;
border-radius: 100%;
-webkit-transition: border-color 300ms;
-moz-transition: border-color 300ms;
transition: border-color 300ms;
}
.videoPoster:after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
margin: -20px 0 0 -10px;
border-left: 40px solid #fff;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
-webkit-transition: border-color 300ms;
-moz-transition: border-color 300ms;
transition: border-color 300ms;
}
.videoPoster:hover:before, .videoPoster:focus:before {
border-color: #f00;
}
.videoPoster:hover:after, .videoPoster:focus:after {
border-left-color: #f00;
}
.videoWrapperActive .videoPoster {
opacity: 0;
height: 0;
-webkit-transition-delay: 0s, 800ms;
-moz-transition-delay: 0s, 800ms;
transition-delay: 0s, 800ms;
}
<style>
<script src="https://code.jquery.com/jquery-1.8.3.js"></script>
<script type="text/javascript">
;(function($){
$(function(){
$(document).on('click','.js-videoPoster',function(e) {
//отменяем стандартное действие button
e.preventDefault();
var poster = $(this);
// ищем родителя ближайшего по классу
var wrapper = poster.closest('.js-videoWrapper');
videoPlay(wrapper);
});
//вопроизводим видео, при этом скрывая постер
function videoPlay(wrapper) {
var iframe = wrapper.find('.js-videoIframe');
// Берем ссылку видео из data
var src = iframe.data('src');
// скрываем постер
wrapper.addClass('videoWrapperActive');
// подставляем в src параметр из data
iframe.attr('src',src);
}
})
})(jQuery);
</script>
</head>
<body>
<div class="video_wrapper video_wrapper_full js-videoWrapper">
<!--
1. Ссылку на видео храним в data-src, а не src
2. Обратим внимание, что выставлены параметры автовоспроизведения(autoplay=1), отмены воспроизведения похожих видео(rel=0), не показываем информацию об авторе(showinfo=0), отключаем лого ютуб (modestbranding=1)
Полный список параметров: https://developers.google.com/youtube/player_parameters?hl=ru
-->
<iframe class="videoIframe js-videoIframe" src="" frameborder="0" allowTransparency="true" allowfullscreen data-src="https://www.youtube.com/embed/G4cJ4wviwS8?autoplay=1&modestbranding=1&rel=0&hl=ru&showinfo=0&color=white"></iframe>
<button class="videoPoster js-videoPoster"></button>
</div>
</body>
</html>
<!-- My custom code -->
<!-- HTML structure/Markup -->
<div class="video_wrapper video_wrapper_full js-videoWrapper">
<div class="iframe-wrap">
<iframe class="videoIframe js-videoIframe" src="" frameborder="0" allowTransparency="true" allowfullscreen data-src="https://www.youtube.com/embed/ss33DH-dou8?autoplay=1&modestbranding=1&rel=0&hl=ru&showinfo=0&color=white"></iframe>
</div>
<div class="videoPoster js-videoPoster" style="background-image:url(images/info-item1.png);"></div>
</div>
<!-- Css style -->
.video_wrapper{width: 100%; margin: 0 auto; position: relative; background-color: #000;}
.videoIframe{width: 100%; height: 450px; background-color: transparent;}
.videoPoster{position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; border: none text-indent: -999em; overflow: hidden; opacity: 1; -webkit-transition: opacity 800ms, height 0s; -moz-transition: opacity 800ms, height 0s; transition: opacity 800ms, height 0s; -webkit-transition-delay: 0s, 0s; -moz-transition-delay: 0s, 0s; transition-delay: 0s, 0s;}
.videoPoster:hover{cursor: pointer;}
.videoPoster:before{content: ''; position: absolute; top: 50%; left: 50%; width: 104px; height: 104px; margin: -52px 0 0 -52px; background-image: url(../images/play-icon.png); background-size: contain; background-position: center; background-repeat: no-repeat; -webkit-transition: border-color 300ms; -moz-transition: border-color 300ms; transition: border-color 300ms;}
.videoWrapperActive .videoPoster{opacity: 0; height: 0; -webkit-transition-delay: 0s, 800ms; -moz-transition-delay: 0s, 800ms; transition-delay: 0s, 800ms; }
<!-- Scripting function -->
$(document).on('click','.js-videoPoster',function(e) {
//отменяем стандартное действие button
e.preventDefault();
var poster = $(this);
// ищем родителя ближайшего по классу
var wrapper = poster.closest('.js-videoWrapper');
videoPlay(wrapper);
});
//вопроизводим видео, при этом скрывая постер
function videoPlay(wrapper) {
var iframe = wrapper.find('.js-videoIframe');
// Берем ссылку видео из data
var src = iframe.data('src');
// скрываем постер
wrapper.addClass('videoWrapperActive');
// подставляем в src параметр из data
iframe.attr('src',src);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment