Прикрепляем скрин видео к плееру moonwalk

[o6opmot]

Небольшой скрипт позволяющий прикреплять скрин видео к плееру moonwalk
P.S Скрипт делался для другого форума , но я решил его разместить и тут. Скрипт не был написан с нуля и предназначался для другого, Мной он был переделан для плеера moonwalk. Так-что если кто -то будет говорить что данная тема уже есть на другом форуме и то что это полная копия той темы, Я не буду отрицать , Тема моя и размещаю ее где считаю нужно.

В то место где должен выводиться плеер

html-код:

<div class="video js-video" data-moonwalk="ссылка_на_видео">
<img class="video__img" src="ссылка_на_скрин" alt="" />
<div id="video__play"><div><i></i><b>Начать просмотр</b></div></div>
</div>

в коде ищем строчку: data-moonwalk="ссылка_на_видео" где "ссылка_на_видео" меняем на свой код (доп. поле)
Так же проделываем с строчкой src="ссылка_на_скрин" где "ссылка_на_скрин" меняем на свой код (доп. поле)

Далее сам скрипт устанавливаем перед закрывающим тегом </body>

js-код:

<script>
$(function(){
$("#video__play").click(function(){
        var dataMoonwalk = $(this).parents('.js-video').attr('data-moonwalk');
        $(this).parents('.js-video').html('<iframe src="'+ dataMoonwalk +'?autoplay=1" width="610" height="370" frameborder="0" allowfullscreen=""></iframe>')
    });
 
});
</script>

Ну и напоследок сами стили

css-код:

#video__play>div>i {
    position: absolute;
    display: block;
    content: " ";
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    top: 50%;
    left: 40px;
    margin-top: -1.5em;
    margin-left: -1em;
    border-right-width: 0;
    border-top-width: 1.5em;
    border-left-width: 2em;
    border-bottom-width: 1.5em;
    border-left-color: #ffffff;
}

#video__play>div {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -120px;
    margin-top: -40px;
    border: 1px solid #ffffff;
    font-weight: 700;
    color: #ffffff;
    font-size: 16px;
    font-family: Arial;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    width: 240px;
    height: 80px;
    text-shadow: 1px 1px 3px #333;
}

#video__play>div:hover {
  background-color: rgba(0, 0, 0, 0.61);
}

#video__play {
    position: absolute;
    top: 0px;
    right: 0px;
    left: 0px;
    bottom: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    clear: both;
    cursor: pointer;
}

#video__play>div>b {
    position: relative;
    top: 30px;
    left: 75px;
    font-size: 15px;
}