0

I try to do this, put an image on an iframe, when I click on it, I see a gif image (upload) and at the end I show the iframe with JavaScript, I try to do it with this code but I can not get the image deleted, it just stays the gif image.

I would like to do something like this:

https://sv.danimados.com/gilberto.php?id=cHJsZ0MwWXFDb2h1eGJrcUI0WFlsWnYyN3puT1BzbWtqSDlrWlZ3R3BQNGI3V3RjOWNDZ3kwWStFVDVNQmx1Ng==&sv=UploadYour

<html>
<head>
<meta charset="UTF-8">
<meta name="googlebot" CONTENT="noindex" />
<meta name="robots" content="noindex">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css">
html, body {
    margin: 0;
    height: 100%;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.3);
}

.container {
    height: 100%;
    overflow: auto;
}

.section {
    position: relative;
    width: 100%;
}

.section p {
    margin: 0;
}

/* sizes */

.fit {
    height: 100%;
}

.wide {
    height: auto;
    padding-top: 56.25%;
    /* 9 / 16 = 0.5625 */
}

.wide .content {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

/* centering */

.t {
    display: table;
    width: 100%;
    height: 100%;
}

.tc {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.cargando {
    color: #fff;
    font-family: Arial;
    position: relative;
    font-size: 20px;
    z-index: 1;
    font-weight: bold;
    top: 35%;
    cursor: pointer;
}

.cargando img {
    width: 150px;
    height: 150px;
}

.theplayer {
    z-index: 10000;
}

.play-background:hover {
    transition: all .6s;
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}

.play-background {

    cursor: pointer;

}
iframe {
    position:absolute;top:0;left:0;width:100%;height:100%;display: none; }


</style>



</head>
<body class="play-background">
<div class="container">
    <div class="section fit">
        <div class="t">
            <div class="tc">
                <div class="cargando">
            <img class="load" style="display: none;" src="https://i.imgur.com/Be2Lu9R.gif"><img class="go-boton" src="https://sv.danimados.com/images/play_button.png"><div class="server">Servidor: <b>NeoPen-O-SV</b></div></div>
    <iframe src="https://sendvid.com/embed/0bmbrf7a" width="100%" height="100%" z-index="1000" style="border: none"></iframe>
            </div>
        </div>
    </div>

</div>
</body>
<script type="text/javascript">

 $( ".play-background" ).click(function() {

  $(".go-boton").hide();
  $(".load").show();
  $(".theplayer").show();

  $(this).removeClass("play-background");
});
</script>
</html>

As I would do when I clicked, I saw the gif image of loading, disappear and show me the iframe.

Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
Andre Lopez
  • 21
  • 2

2 Answers2

1

A loading gif should appear when the iframe is not entirely loaded. If you have slow loading iframes a loading gif is a good thing to have, but having an iframe load with minimal or no latency is better.

  • Does your page have multiple iframes?
    • If so, you should reassess your layout. Iframes are the slowest elements to load and rendering multiple iframes will compound loading times.
    • If not, you should reassess the content of the iframe itself. If the content is a video, try another service to upload and play the video like YouTube or your own site, etc.
  • Can you edit the page in the iframe?
    • If so, then establish communication between the parent page (ie the page you are presently located on) and the child page (ie the page within the iframe). Go to this page for details on how to detect when a child page within an iframe is loaded.
    • If not, you'll need to consider alternatives as described in this post.

  • Once you have determined that the iframe is loaded, remove the loader gif and reveal the play button image.

  • Delegate the click event to the play button image and have the callback function remove the play button image and reveal the iframe.

    $(play-button-image).on('click', function(e) {
  $('iframe')[0].src = 'https://html5demos.com/assets/dizzy.mp4';
  $(this).fadeOut().removeClass('active');
  $('iframe, figcaption').fadeIn().addClass('active');
  e.stopPropagation();
});

    • If a "double clicking" behavior occurs (ex user clicks the button once and callback function is called but quickly reacts to a second ghost click), add e.stopPropagation(); to the end of the callback function to prevent event bubbling from triggering any other event handlers registered on ancestor tags.

    • Add/remove a special class (ex .active) that represents the state of a tag (ex hide or show)

  • Apply a similar event handler that will remove the iframe and reveal the play button image. In the demo the user clicks the figcaption.caption (see the last code block in demo).

Note: In the demo a setTimeout() is called to simulate the iframe loading slowly. Also, due to SO sandbox rules certain features are blocked (figcaption.caption doesn't show, video isn't responsive, etc.). To run with full functionality copy and paste the source to a text file, save with the .html (alt .htm) extension to file name, and open in a browser.

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    html,
    body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      background: rgba(0, 0, 0, 0.5);
    }
    
    main {
      display: flex;
      flex-flow: column nowrap;
      justify-content: center;
      align-items: center;
      margin: 5vh auto;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
    
    .hframe {
      margin: 0 auto;
      padding-top: 56.25%;
      width: 100%;
      height: auto;
      position: relative;
    }
    
    iframe {
      min-width: 100%;
      min-height: 100%;
      position: absolute;
      z-index: 0;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      overflow: hidden;
      background: rgba(0, 0, 0, 0.3);
    }
    
    .hframe img {
      width: 150px;
      height: 150px;
      position: absolute;
      z-index: 0;
      top: calc(50% - 75px);
      left: calc(50% - 75px);
      cursor: pointer;
    }
    
    .load:hover {
      cursor: not-allowed;
    }
    
    .caption {
      position: absolute;
      z-index: 1;
      top: 0;
      left: 0;
      right: 0;
      overflow: hidden;
      text-align: center;
      font: 100 small-caps 1.2rem/1.2rem Verdana;
      color: cyan;
      background: rgba(0, 0, 0, 0.2);
    }
    
    .go:hover,
    .caption:hover {
      transition: all .6s;
      transform: scale(1.1);
      cursor: pointer;
    }
    
    .active {
      display: block !important;
      z-index: 1000;
    }
  </style>

</head>

<body>
  <main>
    <figure class="hframe">
      <img class="load active" src="https://i.imgur.com/Be2Lu9R.gif">
      <img class="go" src="https://sv.danimados.com/images/play_button.png" style="display: none;">
      <iframe src="" frameborder="0" allowfullscreen style="display: none;"></iframe>
      <figcaption class='caption' style="display: none;"><a>Server: <b>NeoPen-O-SV</b></a></figcaption>
    </figure>
  </main>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
    $(window).on('load', loading);

    function loading(e) {
      setTimeout(function() {
        $('.load').fadeOut().removeClass('active');
        $('.go').fadeIn().addClass('active');
      }, 2500);
    }

    $('.go').on('click', function(e) {
      $('iframe')[0].src = 'https://html5demos.com/assets/dizzy.mp4';
      $(this).fadeOut().removeClass('active');
      $('iframe, .caption').fadeIn().addClass('active');
      e.stopPropagation();
    });

    $('.caption').on('click', function(e) {
      $('iframe, .caption').fadeOut().removeClass('active');
      $('.go').fadeIn().addClass('active');
      $('iframe')[0].src = '';
      e.stopPropagation();
    });
  </script>
</body>

</html>
zer00ne
  • 41,936
  • 6
  • 41
  • 68
0

If I understand correctly, you want the element in front of the iframe to disappear, and then remove class command is not working in the script. Perhaps you are referencing the wrong object to remove the class from? Instead of $(this).removeClass("play-background") Try $("body").removeClass("play-background")

Veggiebob
  • 11
  • 2