在 jquery 中使用 iframe 创建 div

Create a div with iframe in jquery

当有人点击图片时,屏幕会变暗并播放视频。但它不起作用,任何帮助将不胜感激。谢谢你。 (我正在使用 bootstrap 和 fullpage.js)

 HTML:
     <html>
     <body>
      <div class="row">
       <div class="col-lg-3">
           <img "myImg" scr="images/myimage.jpeg"     myVideo="https://youtube.com/embed/" width="100%">
         </div>
       </div>
       </body>
      </head>

    Jquery:
       $("#myImg").click(function(){
     video = '<iframe src="'+ $(this).attr('myVideo') +'" width="600px"      height="auto"></iframe>';
        div = document.createElement('div');
        div.style.backgroundColor = "rgba(0,0,0,0.9)";
        div.style.position = "absolute";
        div.style.width = "100vw";
        div.style.height = "100vh";
         div.style.left = "0";
         div.style.top = "0";
         div.style.verticalAlign = "middle";
         div.html = video;
         document.getElementsByTagName('body')[0].appendChild(div);
        });

有几个错误:

1) 您的 jQuery click 事件正在寻找对 ID 为 myImage 的元素的点击,但您的图像目前没有 ID。将 <img "myImg" ... 更改为 <img id="myImage" ... 以修复点击事件。

2) 您在 <img>.

上将 src(来源)拼错为 scr

3) HTML 是在使用带有 .innerHTML 的 JS 元素上设置的,而不是 .html。将 div.html = video; 更改为 div.innerHTML = video;

更改这些将使您的代码执行。工作预览:

$("#myImage").click(function() {
  video = '<iframe src="' + $(this).attr('myVideo') + '" width="600px"      height="auto"></iframe>';
  div = document.createElement('div');
  div.style.backgroundColor = "rgba(0,0,0,0.9)";
  div.style.position = "absolute";
  div.style.width = "100vw";
  div.style.height = "100vh";
  div.style.left = "0";
  div.style.top = "0";
  div.style.verticalAlign = "middle";
  div.innerHTML = video;
  document.getElementsByTagName('body')[0].appendChild(div);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div class="row">
    <div class="col-lg-3">
      <img id="myImage" src="http://placehold.it/350x150" myVideo="https://youtube.com/embed/" width="100%">
    </div>
  </div>
</body>