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.
Bramanto's Blog 