在jQuery中使用iframe创建一个div

当有人单击图像时，它将变暗屏幕，视频将播放。但这是不起作用的，任何帮助将不胜感激。谢谢。（我正在使用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事件正在寻找具有myImage ID的元素，但是您的图像现在没有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>

相关内容

最新更新

热门标签：