Démarrage/Lecture de la vidéo YouTube intégrée (iframe) sur un clic d'une vidéo mp4

Question

J'essaie d'intégrer une vidéo YouTube sur ma page html en cliquant sur une vidéo mp4. Je me demande si cela est possible de faire?

J'ai copié mon code actuel ci-dessous mais cela ne fonctionnera pas.

$(document).ready(function() { 
 
    $("#video1").on('click', function() { 
 
    var video = '<iframe width="100%" height="auto" src="' + $(this).attr('data-video') + '"frameborder="0" allowfullscreen></iframe>'; 
 
    $(this).replaceWith(video); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="embed-container"> 
 
    <video autoplay muted loop id="play" preload="auto"> 
 
    <source id="video1" src="/media/wysiwyg/cms/halloween/2017/desktop/halloween.mp4" type='video/mp4' data-video="https://www.youtube.com/embed/KJ2dyKGLRMo?autoplay=1"> 
 
    <source id="video1" src="/media/wysiwyg/cms/halloween/2017/desktop/halloween.webm" type='video/webm' data-video="https://www.youtube.com/embed/KJ2dyKGLRMo?autoplay=1"> 
 
    </video> 
 
</div>

post-scriptum pas de crédit à cette vidéo youtube que j'ai utilisé, actuellement en train de l'utiliser comme exemple

Quelqu'un peut-il m'aider?

Answer 1

Peu importe que je l'ai élaboré!

Ajouté l'id du div qui avait la même classe que mon embed contenant

 <div id="video1" class="embed-container" data-video="https://www.youtube.com"> 
      <video autoplay muted loop id="play" preload="auto"> 
      <source src="/media/wysiwyg/cms/halloween/2017/desktop/halloween.mp4" type='video/mp4'> 
      <source src="/media/wysiwyg/cms/halloween/2017/desktop/halloween.webm" type='video/webm'> 
      </video> 
     </div>