[HTML][JavaScript]Miniaturka youtube Opcje

[Puchatek320]

Cześć,
może ktoś wyjaśnić w jaki sposób jest realizowanie zamiana diva w youtube?
Dokładnie chodzi o to że mamy miniaturkę i jak najdziemy to zmienia się w film może ktoś wyjaśnić w jaki sposób można to zrealizować?

np. w takim przypadku?

[HTML] pobierz, plaintext 
 
          <div id="test1">
              <div id="div1">
              ?<picture onmouseover="normalImg(this)" id="divm">
                <img src="thumb.png" alt="..." class="img-thumbnail">
              </picture>
              </div>
 
              <div id="div2">
              <video onmouseover="bigImg(this)" >
                <source src="1.mp4">
              </video>
              </div>
          </div>
 
[HTML] pobierz, plaintext 

chodzi dokładnie o to aby w miejscu diva1 wyświetlił się div2

i jeszcze pytanie w jaki sposób można pobrać id jeśli będzie to wyrzucane z bazy danych np. x razy?

Ten post edytował Puchatek320 24.04.2020, 22:03:14

[Puchatek320]

Chyba łatwiej się nie można tego zrobić? Wyświetla się poster po najechaniu zaczyna się odtwarzanie filmu a po wyjechaniu myszka pojawia się znów poster.

[HTML] pobierz, plaintext 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
 
<div class="video-wrapper col-sm-3">
  <video width="332" height="188" poster="thumb1.png" loop  preload="metadata">
    <source src="../filmy/short/88.mp4" width="332" height="188" type="video/mp4">
    Your browser does not support the video tag.
  </video>
</div>
 
 
<script>
var figure = $(".video-wrapper").hover( hoverVideo, hideVideo );
 
function hoverVideo(e) {  
$('video', this).get(0).play(); 
}
 
function hideVideo(e) {
$('video', this).get(0).load(); 
}
</script>
 
[HTML] pobierz, plaintext