Skip to content

Instantly share code, notes, and snippets.

@Neo-Oli

Neo-Oli/index.html

Created October 28, 2014 14:07
Show Gist options
  • Save Neo-Oli/5fcdfc4d71b22b36a4d1 to your computer and use it in GitHub Desktop.
Save Neo-Oli/5fcdfc4d71b22b36a4d1 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>iframe-click2play</title>
<style>
.iframe-c2p-play {
width: 2em;
height: 2em;
border-radius: 50%;
position: relative;
border: 0.3em solid #2c2c2c;
font-size: 50px;
top: 20%;
margin: 0 auto;
}
.iframe-c2p-play::before {
position: absolute;
content: "";
top: 0.25em;
left: 0.75em;
width: 0em;
height: 0em;
border-top: 0.8em solid rgba(44, 44, 44, 0);
border-bottom: 0.8em solid transparent;
border-left: 0.8em solid #2C2C2C;
}
.iframe-c2p-placeholder{
cursor:pointer;
width:100%;
height: 500px; /*height of iframe*/
width:100%;
background-repeat: no-repeat
}
.iframe-c2p-text{
position: relative;
margin: 0 auto;
top: 20%;
width: 373px;
font-size: 50px;
}
.iframe-c2p{
width:100%;
border:none;
height: 0px;
}
</style>
<script>
function click2play (elem) {
elem.parentNode.getElementsByTagName('iframe')[0].style.height='500px'; //height of iframe
elem.parentNode.getElementsByTagName('iframe')[0].src='http://map.oliverse.ch'; //src of iframe
elem.style.display = 'none';
}
</script>
</head>
<body>
<div class="iframe-c2p-container">
<div class="iframe-c2p-placeholder" onclick="click2play(this)" style="background-image:url(http://oliverse.ch/wp-content/uploads/2014/06/Whole-Map-small.png);" > <!--//preview image of iframe-->
<div class="iframe-c2p-text">
Click to Explore
</div>
<div class="iframe-c2p-play">
</div>
</div>
<iframe class="iframe-c2p"></iframe>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment