Selecionar vídeos através de radio button
Olá, pessoal
uso o leadlovers (plataforma de email marketing) para trabalhar com uma cliente e construo páginas no construtor que eles fornecem, que utiliza bootstrap.
Tenho um bloco de código pronto feito por eles que usei nos dois workshops anteriores da minha cliente, mas fiz algumas modificações e não sei o que deu errado.
No código, tenho quatro radio buttons para quatro vídeos - para selecionar cada vídeo é só clicar no radio button, que é uma imagem.
Precisei adicionar duas divs pra trocar a posição dos radio buttons e o código simplesmente não funciona mais. Ao clicar no radio button, o vídeo não aparece.
Segue o código:
<section id="lancamento" class="row dottedEditor" style="background:#004D40;">
<div class="container boxthumb" id="container">
<div class="col-md-10"> <!-- div adicionada -->
<div id="content">
<div id="content-1">
<article>
<article class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/0MGo7IXZx-E?showinfo=0&rel=0" allowfullscreen="1" style="border: 1px solid whitesmoke;" width="100%" height="480px" frameborder="0"></iframe>
<article class="frameCover" data-type="video"></article>
</article>
</article>
</div>
<div id="content-2">
<article>
<article class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/0MGo7IXZx-E?showinfo=0&rel=0" allowfullscreen="1" style="border: 1px solid whitesmoke;" width="100%" height="480px" frameborder="0"></iframe>
<article class="frameCover" data-type="video"></article>
</article>
</article>
</div>
<div id="content-3">
<article>
<article class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/0MGo7IXZx-E?showinfo=0&rel=0" allowfullscreen="1" style="border: 1px solid whitesmoke;" width="100%" height="480px" frameborder="0"></iframe>
<article class="frameCover" data-type="video"></article>
</article>
</article>
</div>
<div id="content-4">
<article>
<article class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/0MGo7IXZx-E?showinfo=0&rel=0" allowfullscreen="1" style="border: 1px solid whitesmoke;" width="100%" height="480px" frameborder="0"></iframe>
<article class="frameCover" data-type="video"></article>
</article>
</article>
</div>
</div>
</div>
<div id="input" class="col-md-2"> <!-- segunda div adicionada -->
<input id="tab-1" name="tab-group" type="radio" checked="checked">
<label for="tab-1">
<img class="center-block img-responsive" alt="Miriam Rodrigues" src="https://blob.llimages.com/machine-user-images/img-323253-20171014224325.png" style="max-width: 100%; border-radius: 50%;" width="150px" height="150px">
</label>
<br>
<input id="tab-2" name="tab-group" type="radio">
<label for="tab-2">
<img class="center-block img-responsive dottedEditor" alt="Miriam Rodrigues" src="https://blob.llimages.com/machine-user-images/img-323253-20171014224355.png" style="max-width: 100%; border-radius: 50%;" width="150px" height="150px">
</label>
<br>
<input id="tab-3" name="tab-group" type="radio">
<label for="tab-3">
<img class="center-block img-responsive" alt="Miriam Rodrigues" src="https://blob.llimages.com/machine-user-images/img-323253-20171014224420.png" style="max-width: 100%; border-radius: 50%;" width="150px" height="150px">
</label>
<br>
<input id="tab-4" name="tab-group" type="radio">
<label for="tab-4">
<img class="center-block img-responsive" alt="Miriam Rodrigues" src="https://blob.llimages.com/machine-user-images/img-323253-20171014224723.png" style="max-width: 100%; border-radius: 50%;" width="150px" height="150px">
</label>
</div>
</div>
</section>
<style>
#container input {
/*height: 210px;*/
visibility: hidden;
display: table-cell;
}
#container label {
cursor: pointer;
/* display: block;
float: left;
height: 210px; */
}
.thumb {
width: 16%;
display: inline-block;
vertical-align: top;
margin-bottom: 2%;
}
.boxthumb {
margin-top: 3%;
}
@media (max-width: 922px) {
#container label {
float: none;
}
#container input {
height: 0;
}
}
@media (max-width: 416px) {
/*label[for=tab-1],
label[for=tab-2],
label[for=tab-3],
label[for=tab-4] {
top: 550px;
}
#content {
top: -900px;
}*/
.thumb {
width: 30%;
display: inline-block;
margin: 5% auto;
}
}
#input input:checked+label {
opacity: 0.5;
color: #444;
position: relative;
z-index: 6;
/*
-webkit-transition: .1s;
-moz-transition: .1s;
-o-transition: .1s;
-ms-transition: .1s;
*/
}
#content div {
opacity: 0;
z-index: -100;
transition: all linear 0.1s;
}
/* modifiquei de #container para #input */
#input input#tab-1:checked~#content #content-1,
#input input#tab-2:checked~#content #content-2,
#input input#tab-3:checked~#content #content-3,
#input input#tab-4:checked~#content #content-4 {
opacity: 1;
display: block;
}
#input input#tab-1:not(:checked)~#content #content-1,
#input input#tab-2:not(:checked)~#content #content-2,
#input input#tab-3:not(:checked)~#content #content-3,
#input input#tab-4:not(:checked)~#content #content-4 {
display: none;
}
input.visible {
visibility: visible !important;
}
</style>
Preciso terminar essa página hoje, então qualquer ajuda será muito bem-vinda!
ObrigadaDiscussão (3)
Carregando comentários...