Как обернуть iframe, чтобы он открывался при нажатии - PullRequest
Новая
       1

Как обернуть iframe, чтобы он открывался при нажатии

0 голосов
/ 12 июля 2020

У меня есть изображение, при наведении которого отображается заголовок видео. Я хочу иметь возможность щелкнуть мышью после наведения курсора и отобразить iframe. Мне удалось просто включить проигрыватель vimeo, чтобы он всплывал, но всякий раз, когда я хочу вставить iframe, это не работает. Я понимаю, что не могу обернуть его внутри тега, но я не знаю другого решения. Прямо сейчас, если вы вводите код, при наведении курсора появляется iframe. Я хочу, чтобы он не появлялся при наведении курсора, а появлялся при нажатии. Любая помощь будет принята с благодарностью.

КОД: 

<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>

Ответы [ 2 ]

0 голосов
/ 12 июля 2020 

.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 {}
image
0 голосов
/ 12 июля 2020

Удалите атрибут источника вашего IFrame и установите только его onClick

Дайте вашему IFrame уникальный идентификатор, чтобы вы могли найти его с помощью document.getElementById(). 

<iframe id='myIframe' frameborder="0" scrolling="no" width="550" height="400">

IFrame тогда должен быть источник. Вы можете установить источник, например, следующим образом: 

 document.getElementById("myIframe").src = "https://yoursource.com"

Теперь добавьте этот код внутри атрибута onClick к вашему элементу, на который пользователь должен щелкнуть. 

onClick='document.getElementById("myIframe").src="https://yoursource.com"

Итак ваш полный HTML может выглядеть так: 

<iframe id='myIframe' frameborder="0" scrolling="no" width="550" height="400">
<p onClick="document.getElementById("myIframe").src="https://yoursource.com"">Click here</p>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...