Selecionar vídeos através de radio button

[Débora Provensi 0]

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! 

Obrigada
 

[luiz14 16]

Débora, quais foram exatamente as modificações que você fez (incluindo o css)? Quais as divs que você adicionou? foram as divs com id= "content-3 e o content-4"? Edita a sua pergunta e coloca um comentário onde você modificou, assim fica mais fácil de te ajudar.

[Débora Provensi 0]

1 hora atrás, luiz14 disse:

Débora, quais foram exatamente as modificações que você fez (incluindo o css)? Quais as divs que você adicionou? foram as divs com id= "content-3 e o content-4"? Edita a sua pergunta e coloca um comentário onde você modificou, assim fica mais fácil de te ajudar.

Obrigada pela sugestão, já corrigi!

[luiz14 16]

Pelo que eu vi aqui na minha maquina. O problema são os seletores hierárquicos. O que aconteceu foi que ao criar a primeira e segunda divs, os inputs deixaram de ser irmãos das divs que deveriam aparecer após clicar no input referente a elas, por isso que não estão mais funcionando, mas essas divs com id "content, content-1, content-2, content-3 e content-4" estavam aparecendo antes acima dos inputs?  Porque eu vi na internet que o checked do css só funciona se o input estiver antes do elemento que for afetado, talvez possa ter mudado ou eu tenha visto errado, no teste que eu fiz só funcionou quando coloquei os inputs antes. Vou colocar abaixo o código comentado:

 

HTML

 

<section id="lancamento" class="row dottedEditor" style="background:#004D40;">
    <div class="container boxthumb" id="container">
      <!-- coloquei a class col-md-10 dentro da class col-md-2 e abaixo dos inputs-->
        <div id="input" class="col-md-2"> 
            <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>
            <!-- incio Class col-md-10 -->
            <div class="col-md-10">
            <div id="content">
                <div id="content-1">
                        <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>
                </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>
            <!-- Fim Class col-md-10 -->
        </div>
    </div>
</section>

CSS

 

#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;
    }
/*    inseri o .col-md-10 antes do #content*/
    #input input#tab-1:checked~.col-md-10 #content #content-1,
    #input input#tab-2:checked~.col-md-10 #content #content-2,
    #input input#tab-3:checked~.col-md-10 #content #content-3,
    #input input#tab-4:checked~.col-md-10 #content #content-4 {
        opacity: 1;
        display: block;
    }

    #input input#tab-1:not(:checked)~.col-md-10 #content #content-1,
    #input input#tab-2:not(:checked)~.col-md-10 #content #content-2,
    #input input#tab-3:not(:checked)~.col-md-10 #content #content-3,
    #input input#tab-4:not(:checked)~.col-md-10 #content #content-4 {
        display: none;
    }
    /*final da inserção do .col-md-10*/

    input.visible {
        visibility: visible !important;
    }

OBS: Eu não estou usando bootstrap na minha máquina, pode ter alterado alguma coisa. Vê se isso resolve o seu problema. Eu não retirei nada, só acrescentei css e mudei a div com class col-md-10 de lugar colocando-a dentro da div com class col-md-2.