CSS
3
Вклад в тег
<div class="slider-videos__videos-item js-youtube-wrap">
<div class="slider-videos__youtube js-youtube" id="B7_CMlUwiRI"></div>
</div>
.slider-videos
&__videos-item
display block
position relative
height 154px
overflow hidden
background-color white
width 260px
transition all 1s ease
&:focus
outline none
&__youtube
background-position center
background-repeat no-repeat
background-size 110%
position relative
display inline-block
overflow hidden
transition all 200ms ease-out
cursor pointer
width inherit
height inherit
&__play
background inline('play-icon.svg') no-repeat
background-position center
background-size 15%
position absolute
height 100%
width 100%
opacity .8
transition all 0.2s ease-out
&:hover
opacity 1
$(function() {
$(".js-youtube").each(function() {
$(this).css('background-image', 'url(http://i.ytimg.com/vi/' + this.id + '/sddefault.jpg)');
$(this).append($('<div/>', {'class': 'slider-videos__play'}));
$(document).delegate('#'+this.id, 'click', function() {
var iframe_url = "https://www.youtube.com/embed/" + this.id + "?autoplay=1&autohide=1&enablejsapi=1";
if ($(this).data('params')) iframe_url+='&'+$(this).data('params');
var iframe = $('<iframe/>', {'id': this.id, 'class': 'youtube', 'frameborder': '0', 'allowfullscreen': 'allowfullscreen', 'src': iframe_url, 'width': $(this).width(), 'height': $(this).height() })
$(this).replaceWith(iframe);
});
});
});