How to wrap iframe so it opens on click - html

Question

I have an image which on hover displays the title of a video. I want to be able to click after hovering and have my iframe show up. I have been able to simply put the vimeo player in to pop up, but whenever I want to put the iframe in, it doesn't work. I understand I can't wrap it inside the tag but I don't know another solution. Right now if you input the code, on hover the iframe appears. I want for it to not appear on hover, but appear when I click. Any help would be appreciated.
CODE:
<style>
.hoverfollow {
position: fixed;
}
.hvrbox,
.hvrbox * {
box-sizing: border-box;
}
.hvrbox {
position: relative;
display: inline-block;
overflow: hidden;
width: 30%;
height: auto;
}
.hvrbox img {
max-width: 100%;
}
.hvrbox_background {
width: 400px;
height: 250px;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.hvrbox .hvrbox-layer_bottom {
display: block;
}
.hvrbox .hvrbox-layer_top {
text-decoration: none;
opacity: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
color: #fff;
padding: 15px;
-moz-transition: all 0.4s ease-in-out 0s;
-webkit-transition: all 0.4s ease-in-out 0s;
-ms-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.hvrbox:hover .hvrbox-layer_top,
.hvrbox.active .hvrbox-layer_top {
opacity: 1;
}
.hvrbox .hvrbox-text {
text-align: center;
font-family: "DIN";
font-size: 10px;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100%;
height: auto;
}
.hvrbox .hvrbox-text_mobile {
font-size: 15px;
border-top: 1px solid rgb(179, 179, 179);
/* for old browsers */
border-top: 1px solid rgba(179, 179, 179, 0.7);
margin-top: 5px;
padding-top: 2px;
display: none;
}
.hvrbox.active .hvrbox-text_mobile {
display: block;
}
.hvrbox .hvrbox-layer_image {
padding: 0;
background: none;
}
.hvrbox .hvrbox-layer_slideup {
-moz-transform: translateY(100%);
-webkit-transform: translateY(100%);
-ms-transform: translateY(100%);
transform: translateY(100%);
}
.hvrbox:hover .hvrbox-layer_slideup,
.hvrbox.active .hvrbox-layer_slideup {
-moz-transform: translateY(0);
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
.hvrbox .hvrbox-layer_slidedown {
-moz-transform: translateY(-100%);
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
}
.hvrbox:hover .hvrbox-layer_slidedown,
.hvrbox.active .hvrbox-layer_slidedown {
-moz-transform: translateY(0);
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
.hvrbox .hvrbox-layer_slideleft {
-moz-transform: translateX(100%);
-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%);
}
.hvrbox:hover .hvrbox-layer_slideleft,
.hvrbox.active .hvrbox-layer_slideleft {
-moz-transform: translateX(0);
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
.hvrbox .hvrbox-layer_slideright {
-moz-transform: translateX(-100%);
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
}
.hvrbox:hover .hvrbox-layer_slideright,
.hvrbox.active .hvrbox-layer_slideright {
-moz-transform: translateX(0);
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
.hvrbox .hvrbox-layer_scale {
border-radius: 50%;
-moz-transform: scale(0);
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
}
.hvrbox:hover .hvrbox-layer_scale,
.hvrbox.active .hvrbox-layer_scale {
border-radius: 0%;
-moz-transform: scale(1);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.hvrbox .hvrbox-layer_rotate {
border-radius: 50%;
-moz-transform: rotateZ(0);
-webkit-transform: rotateZ(0);
-ms-transform: rotateZ(0);
transform: rotateZ(0);
}
.hvrbox:hover .hvrbox-layer_rotate,
.hvrbox.active .hvrbox-layer_rotate {
border-radius: 0%;
-moz-transform: rotateZ(360deg);
-webkit-transform: rotateZ(360deg);
-ms-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}
.hvrbox .hvrbox-layer_scale-rotate {
border-radius: 50%;
-moz-transform: scale(0) rotateZ(0);
-webkit-transform: scale(0) rotateZ(0);
-ms-transform: scale(0) rotateZ(0);
transform: scale(0) rotateZ(0);
}
.hvrbox:hover .hvrbox-layer_scale-rotate,
.hvrbox.active .hvrbox-layer_scale-rotate {
border-radius: 0%;
-moz-transform: scale(1) rotateZ(360deg);
-webkit-transform: scale(1) rotateZ(360deg);
-ms-transform: scale(1) rotateZ(360deg);
transform: scale(1) rotateZ(360deg);
}
body,
p,
a,
h1,
h2,
h3,
h4,
h5,
h6,
div {
font-family: "DIN", sans-serif !important;
margin: 0;
text-decoration: none;
}
header {
background: #009FDA none repeat scroll 0% 0%;
box-shadow: 0px 0px 4px rgba(84, 84, 84, 0.5);
padding: 5px 15px;
color: #fff;
text-align: center;
overflow: hidden;
}
header img {
height: 50px;
float: left;
}
header h1 {
text-transform: uppercase;
font-weight: 400;
font-size: 26px;
line-height: 48px;
}
.content h1,
.content h2,
.content h3 {
margin: 15px 0 0px 0;
}
.content {
max-width: 1200px;
margin: 50px auto 0 auto;
width: 100%;
}
pre {
background: #F2F2F2 none repeat scroll 0% 0%;
font-size: 15px;
padding: 10px;
border-radius: 3px;
margin: 10px 0;
white-space: pre-wrap;
-ms-tab-size: 4;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
}
footer {
background: #000;
color: #fff;
padding: 10px;
font-size: 13px;
}
footer a {
color: inherit;
text-decoration: none;
}
footer a:hover,
footer a:focus {
text-decoration: underline;
}
.align {
top: 5%;
left: 5%;
}
iframe {
width: 700px;
/* adjust to your needs */
max-width: 100%;
/* to make it responsive */
animation-name: fadeIn;
animation-duration: 4s;
}
#amaka {
width: 100%;
height: auto;
margin-top: 5%;
animation-name: fadeIn;
animation-duration: 4s;
}
</style>
<main>
<a class="align" href="test">
<div class="hvrbox align">
<img id="amaka" src="http://www.noscht.com/wp-content/uploads/2020/07/amaka.png" alt="AMAKA" class="hvrbox-layer_bottom">
<div class="hvrbox-layer_top">
<div class="hvrbox-text">
AMAKA QUEENETTE - "SUFFOCATE"</div>

Answer 1

Remove the source attribute of your IFrame and only set it onClick
Give your IFrame a unique identifier so you can find it with document.getElementById().
<iframe id='myIframe' frameborder="0" scrolling="no" width="550" height="400">
The IFrame should then have a source. You can set the source for example like this:
document.getElementById("myIframe").src = "https://yoursource.com"
Now add this code inside the onClick attribute to your element you want the user to click on.
onClick='document.getElementById("myIframe").src="https://yoursource.com"
So your full HTML could look like this:
<iframe id='myIframe' frameborder="0" scrolling="no" width="550" height="400">
<p onClick="document.getElementById("myIframe").src="https://yoursource.com"">Click here</p>

Answer 2

.hoverfollow {
position: fixed;
}
.hvrbox,
.hvrbox * {
box-sizing: border-box;
}
.hvrbox {
position: relative;
display: inline-block;
overflow: hidden;
width: 30%;
height: auto;
}
.hvrbox img {
max-width: 100%;
}
.hvrbox_background {
width: 400px;
height: 250px;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.hvrbox .hvrbox-layer_bottom {
display: block;
}
.hvrbox .hvrbox-layer_top {
text-decoration: none;
opacity: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
color: #fff;
padding: 15px;
-moz-transition: all 0.4s ease-in-out 0s;
-webkit-transition: all 0.4s ease-in-out 0s;
-ms-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.hvrbox:hover .hvrbox-layer_top,
.hvrbox.active .hvrbox-layer_top {
opacity: 1;
}
.hvrbox .hvrbox-text {
text-align: center;
font-family: "DIN";
font-size: 10px;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100%;
height: auto;
}
.hvrbox .hvrbox-text_mobile {
font-size: 15px;
border-top: 1px solid rgb(179, 179, 179);
/* for old browsers */
border-top: 1px solid rgba(179, 179, 179, 0.7);
margin-top: 5px;
padding-top: 2px;
display: none;
}
.hvrbox.active .hvrbox-text_mobile {
display: block;
}
.hvrbox .hvrbox-layer_image {
padding: 0;
background: none;
}
.hvrbox .hvrbox-layer_slideup {
-moz-transform: translateY(100%);
-webkit-transform: translateY(100%);
-ms-transform: translateY(100%);
transform: translateY(100%);
}
.hvrbox:hover .hvrbox-layer_slideup,
.hvrbox.active .hvrbox-layer_slideup {
-moz-transform: translateY(0);
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
.hvrbox .hvrbox-layer_slidedown {
-moz-transform: translateY(-100%);
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
}
.hvrbox:hover .hvrbox-layer_slidedown,
.hvrbox.active .hvrbox-layer_slidedown {
-moz-transform: translateY(0);
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
.hvrbox .hvrbox-layer_slideleft {
-moz-transform: translateX(100%);
-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%);
}
.hvrbox:hover .hvrbox-layer_slideleft,
.hvrbox.active .hvrbox-layer_slideleft {
-moz-transform: translateX(0);
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
.hvrbox .hvrbox-layer_slideright {
-moz-transform: translateX(-100%);
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
}
.hvrbox:hover .hvrbox-layer_slideright,
.hvrbox.active .hvrbox-layer_slideright {
-moz-transform: translateX(0);
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
.hvrbox .hvrbox-layer_scale {
border-radius: 50%;
-moz-transform: scale(0);
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
}
.hvrbox:hover .hvrbox-layer_scale,
.hvrbox.active .hvrbox-layer_scale {
border-radius: 0%;
-moz-transform: scale(1);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.hvrbox .hvrbox-layer_rotate {
border-radius: 50%;
-moz-transform: rotateZ(0);
-webkit-transform: rotateZ(0);
-ms-transform: rotateZ(0);
transform: rotateZ(0);
}
.hvrbox:hover .hvrbox-layer_rotate,
.hvrbox.active .hvrbox-layer_rotate {
border-radius: 0%;
-moz-transform: rotateZ(360deg);
-webkit-transform: rotateZ(360deg);
-ms-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}
.hvrbox .hvrbox-layer_scale-rotate {
border-radius: 50%;
-moz-transform: scale(0) rotateZ(0);
-webkit-transform: scale(0) rotateZ(0);
-ms-transform: scale(0) rotateZ(0);
transform: scale(0) rotateZ(0);
}
.hvrbox:hover .hvrbox-layer_scale-rotate,
.hvrbox.active .hvrbox-layer_scale-rotate {
border-radius: 0%;
-moz-transform: scale(1) rotateZ(360deg);
-webkit-transform: scale(1) rotateZ(360deg);
-ms-transform: scale(1) rotateZ(360deg);
transform: scale(1) rotateZ(360deg);
}
body,
p,
a,
h1,
h2,
h3,
h4,
h5,
h6,
div {
font-family: "DIN", sans-serif !important;
margin: 0;
text-decoration: none;
}
header {
background: #009FDA none repeat scroll 0% 0%;
box-shadow: 0px 0px 4px rgba(84, 84, 84, 0.5);
padding: 5px 15px;
color: #fff;
text-align: center;
overflow: hidden;
}
header img {
height: 50px;
float: left;
}
header h1 {
text-transform: uppercase;
font-weight: 400;
font-size: 26px;
line-height: 48px;
}
.content h1,
.content h2,
.content h3 {
margin: 15px 0 0px 0;
}
.content {
max-width: 1200px;
margin: 50px auto 0 auto;
width: 100%;
}
pre {
background: #F2F2F2 none repeat scroll 0% 0%;
font-size: 15px;
padding: 10px;
border-radius: 3px;
margin: 10px 0;
white-space: pre-wrap;
-ms-tab-size: 4;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
}
footer {
background: #000;
color: #fff;
padding: 10px;
font-size: 13px;
}
footer a {
color: inherit;
text-decoration: none;
}
footer a:hover,
footer a:focus {
text-decoration: underline;
}
.align {
top: 5%;
left: 5%;
}
iframe {
width: 700px;
/* adjust to your needs */
max-width: 100%;
/* to make it responsive */
animation-name: fadeIn;
animation-duration: 4s;
}
#amaka {
width: 100%;
height: auto;
margin-top: 5%;
animation-name: fadeIn;
animation-duration: 4s;
}
#myIframe {}
<main>
<div class="hvrbox align">
<img id="amaka" src="http://www.noscht.com/wp-content/uploads/2020/07/amaka.png" alt="AMAKA" class="hvrbox-layer_bottom">
<a href="#">
<div onClick='document.getElementById("myIframe").src="https://player.vimeo.com/video/389137312"' class="hvrbox-layer_top"></div>
</a>
<div class="hvrbox-text">
AMAKA QUEENETTE - "SUFFOCATE"</div>
<iframe id="myIframe" onClick="https://player.vimeo.com/video/389137312" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
</div>
</main>