Youtube video load and play on click. Stop on sibling play

Youtube video load and play on click. Stop on sibling play

... А также вот альтернативные ссылки на превьюшки:

  1. http://img.youtube.com/vi/YOUTUBE_CODE/hqdefault.jpg
  2. http://img.youtube.com/vi/YOUTUBE_CODE/mqdefault.jpg
  3. http://img.youtube.com/vi/YOUTUBE_CODE/sddefault.jpg
  4. http://img.youtube.com/vi/YOUTUBE_CODE/maxresdefault.jpg

И ссылочка для тех, кому хочется ваащпте все круто сделать — https://stackoverflow.com/questions/2068344/how-do-i-get-a-youtube-video-thumbnail-from-the-youtube-api

Рарзметка HTML:

Стили CSS:

.video_area_trigger{
    position: relative;
}
.video_area_trigger img{
    width:100%;
    position: relative;
    cursor: pointer;
}
.video_area_trigger:before {
    cursor: pointer;
    position: absolute;
    content: "";
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAABYCAYAAAA9U/+JAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDY3QzI5OUUzNjc3MTFFNjg1OTlCNkYxOTExRDBCQUMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDY3QzI5OUYzNjc3MTFFNjg1OTlCNkYxOTExRDBCQUMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0NjdDMjk5QzM2NzcxMUU2ODU5OUI2RjE5MTFEMEJBQyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0NjdDMjk5RDM2NzcxMUU2ODU5OUI2RjE5MTFEMEJBQyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PirFwrgAABF7SURBVHja7F15kB3F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');
    background-repeat: no-repeat;
    background-position: 50%;
    -webkit-background-size: contain;
    background-size: contain;
    z-index: 2;
    height: 44px;
    width: 64px;
    left: 50%;
    top: 50%;
    margin-left: -32px;
    margin-top: -22px;
    opacity: 0.8;
}
.video_area_video_item .video_area_trigger:hover:before {
    opacity: 1;
}

Скрипты JS:

$(".video_area_trigger").click(function(){
    $(".video_area_trigger").parent().find('iframe').remove();
    $(".video_area_trigger").show();
    var t = $(this);
    var width = parseInt(t.css("width"));
    var height = parseInt(t.css("height"));
    var videolink = t.attr("data-videolink");
    var tp = t.parent();
    tp.append('');
    t.hide();
});

Результат:

Способ поблагодарить автора сайта:

Комментарии (0)

  1. Напишите первый комментарий
*Комментарий будет опубликован после проверки модератором
Наш сайт использует куки, нажмите «ОК» если вы не против
OK