How to make a popup with youtube text and video?

1

I need to make a pop-up that contains both text and YouTube video, the problem is that pop-up is much larger than the height of the screen. In the home page of the site before clicking the link to open the pop-up , the space that the pop-up occupies ends up causing the page to create a vertical scroll , because it is still hidden.

I've looked at everything on the site and I have not seen anything like it. I found only text, only image or video only, or even using iframe . But with iframe I can not do.

<--- LINK PARA A PÁGINA --->
http://progdesenv.com.br/tapetv

<--- AQUI COMEÇA O CABEÇALHO --->
<!doctype html>
<html lang="pt-br">
<meta http-equiv="refresh" />
<head>

<--- LINK DO JS QUE CONTROLA O POP UP --->
http://progdesenv.com.br/tapetv/js/jquery.reveal.js

</head>

<--- AQUI COMEÇA O CONTEÚDO --->
<body>
<div id="site">

    <section class="home">

        <section class="barra-topo">
    <div>
        <h1><a href="index.php" title="tapeTV">tapeTV</a></h1>
        <ul>
            <li><a href="quem-somos.php" class="show" data-reveal-id="pop2" title="QUEM SOMOS">QUEM SOMOS</a></li>
            <li><a href="contato.php" class="show" data-reveal-id="pop1" title="CONTATO">CONTATO</a></li>
            <li><a href="#" title="INSTAGRAM">INSTAGRAM</a></li>
            <li><a href="#" title="FACEBOOK">FACEBOOK</a></li>
            <li><a href="#" title="TWITTER">TWITTER</a></li>
        </ul>
    </div>
</section>
        <div class="conteudo">
            <ul>
                <li><a href="weddings-quem-somos.php" title="WEDDINGS">WEDDINGS</a></li>
                <li><a href="media-quem-somos.php" title="MEDIA AND MUSIC">MEDIA AND MUSIC</a></li>
                <li><a href="corporate-quem-somos.php" title="CORPORATE">CORPORATE</a></li>
            </ul>
        </div>
    </section>
</div>

<--- AQUI COMEÇA O POP-UP --->

<div id="pop2" class="reveal-modal">
    <section class="cont-pop quem-pop">
        <h1></h1>
        <a href="#" title="FECHAR" class="close-reveal-modal">FECHAR</a>
        <p>undada oficialmente em 2009, a Quartel Design é uma agência mineira de comunicação visual conhecida por oferecer um “design de alto calibre”. Atualmente, a empresa conta com um jovem pelotão de integrantes que, com muito planejamento e pesquisa, elaboram projetos inovadores, dinâmicos e totalmente personalizados. Excelência e criatividade são premissas obrigatórias em cada missão executada pela tropa da Quartel Design, que acumula em seu portfólio inúmeros cases de sucesso.</p>

        <p>Missão</p>

        <p>Nossa missão é composta por três pilares:</p>

        <p>Promover diálogo fácil e trabalhar em parceria com o cliente durante todo o processo de criação;
        Desenvolver projetos originais e exclusivos de acordo com o perfil e os objetivos de cada cliente;
         Atender e superar expectativas;<br />Visão/Alvo</p>

        <p>Ampliar a atuação em diversos segmentos e tornar-se referência no país em design e desenvolvimento de websites em wordpress.</p>

        <p>Valores</p>

        <p>Excelência<br />
        Criatividade</p>
        <div class="you">
        <object width="784" height="441"><param name="movie" value="//www.youtube.com/v/BCr7y4SLhck?version=3&amp;hl=pt_BR&amp;rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="//www.youtube.com/v/BCr7y4SLhck?version=3&amp;hl=pt_BR&amp;rel=0" type="application/x-shockwave-flash" width="784" height="441" allowscriptaccess="always" allowfullscreen="true"></embed></object>
        </div>
    </section>  
</div>
</body>
</html>
    
asked by anonymous 28.03.2014 / 18:59

1 answer

1

Instead of using visibility: hidden , use display:none , it will take the scroll from the screen.

    
02.04.2014 / 21:17