Como colocar video do youtube full width responsivo como exemplo?

[monteirof7 1]

Desejo colocar um video no meu site exatamente como no exemplo:

https://www.google.com/wallet/

Ou seja, seria um botão (link) que ao ser clicado substitui o layout de parte da página por um video full width do youtube. O processo de colocar um embed video full width responsivo do youtube eu até sei como funciona, na verdade o que gostaria de saber como fazer é substituir o layout da página por esse video quando um link é clicado.

Agradeço desde já qualquer ajuda.

[pwd 7]

Basta definir valores em %.

[andresr 0]

width:100%;

[L. Henrique 179]

Dpatrick e Andresr,

PRESTEM ATENÇÃO no que foi perguntado:

 

O processo de colocar um embed video full width responsivo do youtube eu até sei como funciona, na verdade o que gostaria de saber como fazer é substituir o layout da página por esse video quando um link é clicado.

Agradeço desde já qualquer ajuda.

 

Ele deixou claro que em questão ao responsivo ele sabe como funciona. A base da ajuda é a interpretação do texto, se isso não existir, a ajuda não é valida.

 

-------------------------------------------------------------------------------------
Monteirof7,

/* Opção 1 */

O que você quer é chamado de evento onClick (pesquise e estude, pois é importante) e você só vai conseguir realizar isso utilizando JavaScript/jQuery. Seria interessante dar uma estudada, já que pra Front-End eles são extremamente necessários.

Com esse tipo de evento, você pode definir classes, estilos, animações e por ai vai. Vamos partir de um exemplo bem básico: Você tem uma div com width: 150px; só que você precisa que essa div aumente sua largura quando clicada em um botão, então você pode fazer o seguinte:

$("#id_do_botao").click(function(){
   $('#id_da_div').css('width','100%');
});

Esse é um exemplo simples: O código puxa o botão através do seu id que inseriu no HTML e fornece uma função click (ou seja, quando ele for clicado vai executar algo). Nesse caso ele vai adicionar uma propriedade CSS para a sua div (que também foi chamada por um id - pode ser uma classe também), que no caso é width: 100%;.

Não é tão difícil quanto parece, o que você quer é exatamente isso. Se você quiser ver como isso funciona, preparei uma DEMO pra você.

/* Opção 2 - Não recomendado */

Você pode criar uma nova página com um novo layout, inserir o embed dentro da página e deixar ele por ali. Na sua página principal você pode chamar essa segunda página através de um anchor (<a href="pagina_com_video.php">Video</a>).

/* Opção 3 - Vai demorar */

Você pode criar uma nova página com esse embed e chamar ele via Ajax (Javascript), sem que ele abra uma nova aba ou substitua a sua página atual. Esse é um método mais complicado e creio que demandaria um pouco mais de estudo até chegar no efeito desejado, então pula essa parte.

[Don Benatti 28]

Amigo, o vídeo no Google Wallet não substitui o layout, na verdade, pensar isso é uma ilusão, qual desenvolvedor seria tão ruim a ponto de precisar mudar o layout por conta de um vídeo.

 

O que ocorre é sobreposição

<div class="layout">
    <!-- LAYOUT[....] -->
    
    <!-- Exemplo de botão que abre o vídeo -->
    <a href="#" class="abrir-video">Visualizar vídeo</a>
    
    <!-- Elemento para sobreposição -->
    <div class="hidden-div-video"></div>
</div>

.layout{
    position:relative;
    width:100%;
    height:500px; /* Exemplo */
}

.layout .hidden-div-video {
    display:none;
    position:absolute;
    width:100%; 
    height:100%;
    left:0;
    top:0;
    z-index:9999;
}

.layout .hidden-div-video .video-frame{width:100%; height:100%;}

Ao clicar no botão para abrir o vídeo

// JQUERY

$(".abrir-video").on("click", function(e) {
    e.preventDefault();

    $("hidden-div-video").html('<iframe class="video-frame" src="//www.youtube.com/embed/{ID}?autoplay=1" frameborder="0" allowfullscreen></iframe>');
    $("hidden-div-video").show();
});

Quando clicar em um botão para fechar

$(".fechar").on("click", function(e) {
    e.preventDefault();
    
    $("hidden-div-video").html('');
    $("hidden-div-video").hide();
});

Como "hidden-div-video" está com "position absolute" + "z-index" e "layout" com "position relative", ela vai sobrepor.

[brianleonny 0]

A resposta do Don Bennati foi muito mais objetiva e clara do que a do L. Henrique , pelo simples fato do pensamento lógico do mesmo.