How to Make an Iframe With The Play Button

Recently I got a simple project to create an iframe that contains a play button. So, when the user clicks the button, the elements in the iframe will run or reload. In my case, the element that is reloaded or executed is a game link.

I got a similar code example from this link. But the difference in the link is to execute a video play button from YouTube to play the movie.

I’m trying to change some code so that it suits my customers’ wishes. The following code that I customize.


<!DOCTYPE html>
<html>
<head>
    <title>.: IFRAME :.</title>
    <style type="text/css">
        .wrapper-video {
            position:relative;
            width:640px;
            height: 426px;
        }
        .wrapper-video img {
            width:640px;
            height: 426px;
            height:auto;
        }
        .wrapper-video iframe {
            display:none;            
            background: #DADADA;
            width:640px;
            height: 426px;
        }
        .play-btn-video {
            position:absolute;
            z-index:666;
            top:50%;
            left:50%;
            transform:translate(-50%, -50%);
            background-color:transparent;
            border:0;
        }
        .play-btn-video:hover {
            cursor:pointer;
        }
        .play-btn-video:focus {
            outline:0;
        }
    </style> 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>   
    
    <script>
        $(document).on("click","#play",function() {     
            $('#player').show();
            var url = $(this).data('info');
            $('#player').attr('src', url);
            $('#video-cover').hide();
            $('#play').hide();
        });
    </script>
</head>

<body>
    <div class="wrapper-video">

        <!-- COVER -->
        <img  id="video-cover" src="cover.png" alt="Video title">

        <!-- IFRAME VIDEO -->
        <iframe id="player" width="640" height="426" src="" frameborder="0" allow="autoplay" allowfullscreen></iframe>

        <!-- PLAY BUTTON -->
        <button id="play" class="play-btn-video" data-info="https://staticpff.yggdrasilgaming.com/init/launchClient.html?gameid=7322">
            <svg enable-background="new 0 0 141.73 141.73" height="141.73px" id="Warstwa_1" version="1.1" viewBox="0 0 141.73 141.73" width="141.73px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><path d="M101.628,40.092c-8.22-8.22-19.149-12.746-30.774-12.746c-11.624,0-22.553,4.526-30.772,12.746   c-16.968,16.969-16.967,44.578,0.001,61.546c8.22,8.22,19.149,12.747,30.773,12.747s22.553-4.526,30.772-12.746   s12.747-19.148,12.747-30.773S109.848,48.312,101.628,40.092z M100.214,100.225c-7.842,7.842-18.269,12.16-29.358,12.16   s-21.517-4.319-29.359-12.161c-16.188-16.188-16.188-42.529-0.001-58.718c7.842-7.842,18.269-12.16,29.358-12.16   c11.091,0,21.518,4.318,29.36,12.16c7.842,7.843,12.161,18.269,12.161,29.359S108.056,92.382,100.214,100.225z" fill="#ffffff"/><path d="M65.893,55.983c-0.391-0.391-1.023-0.391-1.414,0s-0.391,1.023,0,1.414l13.466,13.466L64.478,84.331   c-0.391,0.391-0.391,1.023,0,1.414c0.195,0.195,0.451,0.293,0.707,0.293s0.512-0.098,0.707-0.293L80.065,71.57   c0.391-0.391,0.391-1.023,0-1.414L65.893,55.983z" fill="#ffffff"/></g></svg>
        </button>
    </div>
</body>
</html>

If you have an alternative or simpler code, don’t hesitate to share it here. I am very grateful if you want to share and take the time to criticize my writing. Bye..bye.