Question

我试图通过点击mp4视频将YouTube视频嵌入我的html页面。我想知道这是否可行？

我已将我当前的代码复制到下面但不起作用。

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

P.S。我用过的这个YouTube视频没有功劳，目前只是以它为例

任何人都可以帮助我吗？

Answer 1

没关系我已经解决了！

将div添加到与我的embed-container

具有相同类别的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>

单击mp4视频启动/播放嵌入式（iframe）YouTube视频

1 个答案: