Create a div with iframe in jquery

1.2k Views Asked by Matt Williams At 19 October 2024 at 21:30

When someone clicks an image it will darken the screen and the video will play. But it's not working, any help would be appreciated. Thank you. (I'm using bootstrap and 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);
        });

Original Q&A

There are 1 best solutions below

Jon Uleis On 20 December 2016 at 19:18 BEST ANSWER

There are a few errors:

1) Your jQuery click event is looking for a click on an element with the ID of myImage, but your image has no ID right now. Change <img "myImg" ... to <img id="myImage" ... to fix the click event.

2) You misspelled src (source) as scr on your <img>.

3) HTML is set on elements using JS with .innerHTML, not .html. Change div.html = video; to div.innerHTML = video;.

Changing those will get your code to execute. Preview of it working:

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

Create a div with iframe in jquery

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in IFRAME

Related Questions in OVERLAY

Related Questions in FULLPAGE.JS

Trending Questions

Popular # Hahtags

Popular Questions