单击 mp4 视频开始/播放嵌入式 (iframe) youtube 视频

Posted 2023-05-09

【中文标题】单击 mp4 视频开始/播放嵌入式 (iframe) youtube 视频

【英文标题】：Start/Play Embedded (iframe) youtube video on click of an mp4 video

【发布时间】：2018-03-16 21:06:28

【问题描述】：

我正在尝试通过单击 mp4 视频将 youtube 视频嵌入到我的 html 页面中。我想知道这是否可以做到？

我在下面复制了我当前的代码，但它不起作用。

$(document).ready(function() 
  $("#video1").on('click', function() 
    var video = '<iframe   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>

附：我用过的这个 youtube 视频没有功劳，目前只是作为一个例子

谁能帮帮我？

【参考方案1】：

没关系，我解决了！

将 id 添加到与我的嵌入容器具有相同类的 div 中

<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>