D.iK.iJ / Загрузка видео по клику на Jquery и JavaScript. Старт и пауза

Подмена картинки на видео по клику через Jquery, старт и пауза без элементов управления:

<script language="JavaScript" TYPE="text/javascript" src="jquery.min.js"></script> <div class="container"> <img class="play-button" data-video="https://mosaicopal.ru/1.mp4" src="https://mosaicopal.ru/fon.jpg" alt=""> </div> <script> $(".play-button").click(function () { var video = $(this).attr("data-video"); $(this).parent().html('<video autoplay="autoplay" src="'+video+'"></video>'); }); $("body").on("click", "video", function () { if (this.paused) { this.play() } else { this.pause() } }); </script> <style> .container img, .container video { width: 100%; height: auto; height: 54vw; max-height: 720px; object-fit: cover; object-position: center; } </style>

Для плеера Ютуба одной строкой через JavaScript

Меняется только id="youtube1" и ID видео (если нужно несколько блоков на странице):

<center><a href="/go.php?go=https://www.youtube.com/watch?v=ZdhPg_yISCg" target="_blank" class="no youtube knopk" id="youtube1" onclick='this.classList.remove("knopk"); zabil(this.id, "<iframe width=\"560\" height=\"315\" style=\"max-width: 1300px; width: 100%; height: 52vw; min-height: 315px; max-height: 720px;\" src=\"https://www.youtube.com/embed/ZdhPg_yISCg?autoplay=1\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>"); return false;'><img src="//img.youtube.com/vi/ZdhPg_yISCg/maxresdefault.jpg" class="img" itemprop="image" border="0" width="1280" height="720" style="width: 100%; max-width: 1280px; height: auto; max-height: 720px;" alt=""></a></center>

Простая подмена по клику и автозапуск, JavaScript

Картинка берется прямо с Ютуба. По идее, фукция play() может быть встроена сразу в onclick блока с картинкой. Или ее можно наоборот сдлать универсальной через тот же Jquery.

<script> function play() { document.getElementById("video").innerHTML = '<iframe width="787" height="525" style="min-height: 315px; width: 100%; max-width: 1280px; height: 54vw; max-height: 720px;" src="https://www.youtube.com/embed/K3VRnsG1KYI?autoplay=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>'; } </script> <div class="video" id="video" onclick="play();"> <img src="//img.youtube.com/vi/K3VRnsG1KYI/maxresdefault.jpg" width="787" height="525" style="width: 100%; max-width: 1280px; height: 54vw; max-height: 720px;" border="0" alt="0"> </div>