JSFiddle - React, Tailwind, and code Playground

by Сергей Тарасевич

HTML

<div class="po" data-player_youtube="E9jWZRMMyjc">Теория происхождения мужчин и женщин</div>
<div class="po" data-player_youtube="mFDoKfhHAFc">В 20 лет</div>
<div class="po" data-player_youtube="B7PyCaaqUAU">о России</div>
<div class="po" data-player_youtube="adSLjIKDsms">Про Спрашивай.ру</div>
<div id="player"></div>
<div class="player2">
    <div class="po po2" data-player_youtube="open">Открыть плеер</div>
    <div class="po po2" data-player_youtube="dell">Удалить плеер</div>
    <div class="po po2" data-player_youtube="play">Плей</div>
    <div class="po po2" data-player_youtube="pause">Пауза</div>
</div>

CSS

.po {
    background: #B9C4D5;
    border: 1px solid #cccccc;
    color: #000000;
    cursor:pointer;
    display: block;
    margin: 3px;
    padding: 3px;
    cursor:pointer;
}
.po:hover {
    background: #ADCDFF;
}
#player {
    display: block;
    margin: 0 auto;
}
.player2 {
    text-align: center;
}
.po2 {
    background: #0466FF;
    border: 1px solid #cccccc;
    color: #ffffff;
    display: inline-block;
    margin: 5px;
    padding: 5px;
    width: 120px;
}
.po2:hover {
    background: #0C264F;
}

JavaScript

var player;

function initialYouTubeIframeAPIPlayer() {
    $.getScript("https://www.youtube.com/iframe_api", onYouTubeIframeAPIReady);
}

function onYouTubeIframeAPIReady() {
    $('[data-player_youtube="play"],[data-player_youtube="pause"],[data-player_youtube="dell"]').css({
        'display': 'inline-block'
    });
    $('[data-player_youtube="open"]').css({
        'display': 'none'
    });
    player = new YT.Player('player', {
        height: '390',
        width: '640',
        videoId: 'qeiRssAQqV4',
        playerVars: {
            autohide: 1, // 0-1 Показать скрыть панель управления
            autoplay: 0, // 0-1 Авто старт
            rel: 0, // 0-1 похожее видео
            modestbranding: 1, // 0-1 Скрыть логотип
            fs: 1, // 0-1 Полноекрамнный режим
            theme: 'light', // Стиль кнопок
            color: 'white', // red и white Стиль прогрес бара
            showinfo: 0, // 0-1 отключение текста над видео
            controls: 1, // 0-1-2 тип отображения контрольной панели
            disablekb: 0 // 0-1 Горячие клавиши
        }
    });
}
$(document).on('click', '[data-player_youtube]', function () {
    var id = $(this).data('player_youtube');
    if (id == 'open') {
        initialYouTubeIframeAPIPlayer();
    } else if (id == 'dell') {
        $('#player').replaceWith('<div id="player"></div>');
        $('[data-player_youtube="play"],[data-player_youtube="pause"],[data-player_youtube="dell"]').css({
            'display': 'none'
        });
        $('[data-player_youtube="open"]').css({
            'display': 'inline-block'
        });
    } else if (id == 'play') {
        player.playVideo();
    } else if (id == 'pause') {
        player.pauseVideo();
    } else {
        player.loadVideoById({
            'videoId': id
        });
    }
});

$(document).ready(function () {
    initialYouTubeIframeAPIPlayer();
});