Ir ao conteúdo
  • Cadastre-se
Danilo Pupin

HTML Problemas com fullscan em site responsivo

Recommended Posts

Boa tarde a todos!

Estou desenvolvendo um site responsivo pela plataforma Adobe Muse e estou com problemas para inserir um plugin incorporado do youtube na minha página.

Entrei no vídeo que desejo inserir no site e na aba compartilhar captei o código HTML do iframe e inseri através do menu no Muse "inserir objeto html".

O vídeo é executado normalmente tanto em desktop quanto em mobile, mas no mobile (tela menor que 400px) quando tento entrar no modo de tela cheia, o código entra em conflito, achando que na verdade migrei para uma tela maior, e ao invés de rotacionar o vídeo e o exibir em tela cheia no celular, ele redireciona para o layout maior (desktop) e trava o navegador.

 

Construi o site em cima de 5 break points, 1200, 1000, 800, 600, 400px.

 

O código utilizado para inserir o frame no youtube é este:

 

<iframe width="560" height="315" src="https://www.youtube.com/embed/gVqmhzg9Mac" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

 

A unica coisa que mudo nele é o tamanho, em que coloco exatamente como quero que ele apareça na página.

 

Alguém sabe o que pode estar acontecendo? Gostaria de poder contar com o fullscan principalmente na tela mobile, pois os vídeos ficam muito pequenos direto na página.

 

Obrigado!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Não sei usar o Adobe Muse, mas conheço HTML e CSS. Por isso, se você estiver disposto a colocar um print do problema e explicar a seguinte frase, talvez conseguiremos descobrir o erro juntos.

 

Citação

entra em conflito, achando que na verdade migrei para uma tela maior, e ao invés de rotacionar o vídeo e o exibir em tela cheia no celular, ele redireciona para o layout maior (desktop) e trava o navegador.

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Obrigado pela resposta João.

Vou tentar explicar melhor a situação.

Em meu site coloquei alguns vídeos utilizando o recurso de compartilhamento do próprio youtube em html por iframe.

O site é responsivo, no qual desenvolvi em cima de 5 pontos de quebra (1200px, 1000 px, 800px, 600px, 400px). Estes foram suficientes pois em qualquer tela o site se adapta bem.

 

Nestes vídeos em questão, quando acessados de uma tela menor ou igual a 400px (celular) eles travam quando se tenta entrar no modo tela cheia. O layout tenta rotacionar e abrir o vídeo cobrindo toda a tela, mas acredito eu, que o código entende este vídeo em tela cheia como sendo na verdade uma tela maior, que passa dos 400px, e ao invés de abrir o vídeo corretamente, ele tenta entrar no próximo ponto de quebra (600px), e nisso entra em um loop e trava o navegador.

 

Minha solução temporária foi desabilitar o tela cheia, mas realmente gostaria de poder contar com este recurso.

 

Não sei se consegui explicar melhor, mas espero que seja o suficiente.

 

Obrigado!

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Danilo Pupin

Por enquanto, não consigo pensar em nada. No entanto, tenho algumas perguntas:

  1. Você está testando somente em um navegador?
  2. Já testou em um dispositivo adequado ao breakpoint?
  3. Pode adicionar o seu código HTML  e CSS a descrição?
  4. O printscreen não rola?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Obrigado novamente pelo retorno João.

 

Testei no Firefox e no Chrome, mesmo problema.

 

Testei com o modo responsivo do firefox, ele permite simular o tamanho exato da tela que se quer testar. Inseri 400px e o erro foi o mesmo.

 

A baixo segue o código html da pagina em questão.

 

Print não tem como eu fazer porque não é algo estático, acontece quando se tenta entrar no modo tela cheia do vídeo usando uma tela igual ou menor a 400px.

 

Estou configurando meu dominio e assim que estiver tudo online vou habilitar novamente o tela cheia e coloco o link aqui, assim voce consegue testar e entender melhor o que acontece.

<!DOCTYPE html>
<html class="nojs html css_verticalspacer" lang="pt-BR">
 <head>

  <meta http-equiv="Content-type" content="text/html;charset=UTF-8"/>
  <meta name="description" content="Vídeos de shows da Send Rock. Banda atuante no ABC: São Bernardo, Santo André, São Caetano. Vamos trazer até o seu bar, casa de show ou pub o Rock!"/>
  <meta name="keywords" content="banda, rock, paulistana, sao paulo, santo andre, sao caetano, sao bernardo do campo, bar, pub, casa de show, eventos, rock and roll, anos 80, anos 90, anos 2000"/>
  <meta name="generator" content="2018.1.0.386"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  
  <script type="text/javascript">
   // Update the 'nojs'/'js' class on the html node
document.documentElement.className = document.documentElement.className.replace(/\bnojs\b/g, 'js');

// Check that all required assets are uploaded and up-to-date
if(typeof Muse == "undefined") window.Muse = {}; window.Muse.assets = {"required":["museutils.js", "museconfig.js", "jquery.musemenu.js", "jquery.watch.js", "webpro.js", "musewpslideshow.js", "jquery.museoverlay.js", "touchswipe.js", "jquery.museresponsive.js", "require.js", "videos.css"], "outOfDate":[]};
</script>
  
  <link rel="shortcut icon" href="images/a-mestre-favicon.ico?crc=480373464"/>
  <title>Send Rock | Banda de Rock - SP | Vídeos</title>
  <!-- CSS -->
  <link rel="stylesheet" type="text/css" href="css/site_global.css?crc=444006867"/>
  <link rel="stylesheet" type="text/css" href="css/master_a-mestre.css?crc=3918472476"/>
  <link rel="stylesheet" type="text/css" href="css/videos.css?crc=4157063388" id="pagesheet"/>
  <!-- IE-only CSS -->
  <!--[if lt IE 9]>
  <link rel="stylesheet" type="text/css" href="css/nomq_preview_master_a-mestre.css?crc=4285661321"/>
  <link rel="stylesheet" type="text/css" href="css/nomq_videos.css?crc=238685972" id="nomq_pagesheet"/>
  <![endif]-->
  <!-- Other scripts -->
  <script type="text/javascript">
   var __adobewebfontsappname__ = "muse";
</script>
  <!-- JS includes -->
  <!--[if lt IE 9]>
  <script src="scripts/html5shiv.js?crc=4241844378" type="text/javascript"></script>
  <![endif]-->
  <script src="https://webfonts.creativecloud.com/lobster:n4:default.js" type="text/javascript"></script>
  <script src="https://use.typekit.net/ik/Mu5ekhYHCJVAmbdElSdKffWnfU5_jNA613abF1ffWaXfeT9gfJDD1M9PHQI35Q9owRbXWhbXZQMkjDicFeFKFQ9kZRMUFDgcFQ9uZeIawQsqwQIheR97O1F8dcskdhFnOcFzdPoKSKUDZAoqScNR-koRdhX0j1JCiaiaO1F8dcskdhFnOcFzdPoKSKJ4dag8dKuDjAoDH6qJDWIbMg6YJMJ7fbR9SsMMeMb6MqGIQWmDZZMgvlONu69.js" type="text/javascript"></script>
  <!-- Other scripts -->
  <script type="text/javascript">
   try {Typekit.load();} catch(e) {}
</script>
    <!--HTML Widget code-->
  
         <style>
            /*!
             * animsition v4.0.2
             * A simple and easy jQuery plugin for CSS animated page transitions.
             * http://blivesta.github.io/animsition
             * License : MIT
             * Author : blivesta (http://blivesta.com/)
             */
             .animsition,.animsition-overlay{position:relative;opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both}.animsition-overlay-slide{position:fixed;z-index:1;width:100%;height:100%;background-color:#ddd}.animsition-loading,.animsition-loading:after{width:32px;height:32px;position:fixed;top:50%;left:50%;margin-top:-16px;margin-left:-16px;border-radius:50%;z-index:2}.animsition-loading{background-color:transparent;border-top:5px solid rgba(0,0,0,.2);border-right:5px solid rgba(0,0,0,.2);border-bottom:5px solid rgba(0,0,0,.2);border-left:5px solid #eee;-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-duration:.8s;animation-duration:.8s;-webkit-animation-name:animsition-loading;animation-name:animsition-loading}@-webkit-keyframes animsition-loading{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes animsition-loading{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@-webkit-keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.fade-in{-webkit-animation-name:fade-in;animation-name:fade-in}@-webkit-keyframes fade-out{0%{opacity:1}to{opacity:0}}@keyframes fade-out{0%{opacity:1}to{opacity:0}}.fade-out{-webkit-animation-name:fade-out;animation-name:fade-out}@-webkit-keyframes fade-in-up{0%{-webkit-transform:translateY(500px);transform:translateY(500px);opacity:0}to{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@keyframes fade-in-up{0%{-webkit-transform:translateY(500px);transform:translateY(500px);opacity:0}to{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}.fade-in-up{-webkit-animation-name:fade-in-up;animation-name:fade-in-up}@-webkit-keyframes fade-out-up{0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}to{-webkit-transform:translateY(-500px);transform:translateY(-500px);opacity:0}}@keyframes fade-out-up{0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}to{-webkit-transform:translateY(-500px);transform:translateY(-500px);opacity:0}}.fade-out-up{-webkit-animation-name:fade-out-up;animation-name:fade-out-up}@-webkit-keyframes fade-in-up-sm{0%{-webkit-transform:translateY(100px);transform:translateY(100px);opacity:0}to{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@keyframes fade-in-up-sm{0%{-webkit-transform:translateY(100px);transform:translateY(100px);opacity:0}to{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}.fade-in-up-sm{-webkit-animation-name:fade-in-up-sm;animation-name:fade-in-up-sm}@-webkit-keyframes fade-out-up-sm{0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}to{-webkit-transform:translateY(-100px);transform:translateY(-100px);opacity:0}}@keyframes fade-out-up-sm{0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}to{-webkit-transform:translateY(-100px);transform:translateY(-100px);opacity:0}}.fade-out-up-sm{-webkit-animation-name:fade-out-up-sm;animation-name:fade-out-up-sm}@-webkit-keyframes fade-in-up-lg{0%{-webkit-transform:translateY(1000px);transform:translateY(1000px);opacity:0}to{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@keyframes fade-in-up-lg{0%{-webkit-transform:translateY(1000px);transform:translateY(1000px);opacity:0}to{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}.fade-in-up-lg{-webkit-animation-name:fade-in-up-lg;animation-name:fade-in-up-lg}@-webkit-keyframes fade-out-up-lg{0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}to{-webkit-transform:translateY(-1000px);transform:translateY(-1000px);opacity:0}}@keyframes fade-out-up-lg{0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}to{-webkit-transform:translateY(-1000px);transform:translateY(-1000px);opacity:0}}.fade-out-up-lg{-webkit-animation-name:fade-out-up-lg;animation-name:fade-out-up-lg}@-webkit-keyframes fade-in-down{0%{-webkit-transform:translateY(-500px);transform:translateY(-500px);opacity:0}to{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@keyframes fade-in-down{0%{-webkit-transform:translateY(-500px);transform:translateY(-500px);opacity:0}to{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}.fade-in-down{-webkit-animation-name:fade-in-down;animation-name:fade-in-down}@-webkit-keyframes fade-out-down{0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}to{-webkit-transform:translateY(500px);transform:translateY(500px);opacity:0}}@keyframes fade-out-down{0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}to{-webkit-transform:translateY(500px);transform:translateY(500px);opacity:0}}.fade-out-down{-webkit-animation-name:fade-out-down;animation-name:fade-out-down}@-webkit-keyframes fade-in-down-sm{0%{-webkit-transform:translateY(-100px);transform:translateY(-100px);opacity:0}to{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@keyframes fade-in-down-sm{0%{-webkit-transform:translateY(-100px);transform:translateY(-100px);opacity:0}to{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}.fade-in-down-sm{-webkit-animation-name:fade-in-down-sm;animation-name:fade-in-down-sm}@-webkit-keyframes fade-out-down-sm{0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}to{-webkit-transform:translateY(100px);transform:translateY(100px);opacity:0}}@keyframes fade-out-down-sm{0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}to{-webkit-transform:translateY(100px);transform:translateY(100px);opacity:0}}.fade-out-down-sm{-webkit-animation-name:fade-out-down-sm;animation-name:fade-out-down-sm}.fade-in-down-lg{-webkit-animation-name:fade-in-down;animation-name:fade-in-down}@-webkit-keyframes fade-out-down-lg{0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}to{-webkit-transform:translateY(1000px);transform:translateY(1000px);opacity:0}}@keyframes fade-out-down-lg{0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}to{-webkit-transform:translateY(1000px);transform:translateY(1000px);opacity:0}}.fade-out-down-lg{-webkit-animation-name:fade-out-down-lg;animation-name:fade-out-down-lg}@-webkit-keyframes fade-in-left{0%{-webkit-transform:translateX(-500px);transform:translateX(-500px);opacity:0}to{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}@keyframes fade-in-left{0%{-webkit-transform:translateX(-500px);transform:translateX(-500px);opacity:0}to{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}.fade-in-left{-webkit-animation-name:fade-in-left;animation-name:fade-in-left}@-webkit-keyframes fade-out-left{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}to{-webkit-transform:translateX(-500px);transform:translateX(-500px);opacity:0}}@keyframes fade-out-left{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}to{-webkit-transform:translateX(-500px);transform:translateX(-500px);opacity:0}}.fade-out-left{-webkit-animation-name:fade-out-left;animation-name:fade-out-left}@-webkit-keyframes fade-in-left-sm{0%{-webkit-transform:translateX(-100px);transform:translateX(-100px);opacity:0}to{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}@keyframes fade-in-left-sm{0%{-webkit-transform:translateX(-100px);transform:translateX(-100px);opacity:0}to{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}.fade-in-left-sm{-webkit-animation-name:fade-in-left-sm;animation-name:fade-in-left-sm}@-webkit-keyframes fade-out-left-sm{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}to{-webkit-transform:translateX(-100px);transform:translateX(-100px);opacity:0}}@keyframes fade-out-left-sm{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}to{-webkit-transform:translateX(-100px);transform:translateX(-100px);opacity:0}}.fade-out-left-sm{-webkit-animation-name:fade-out-left-sm;animation-name:fade-out-left-sm}@-webkit-keyframes fade-in-left-lg{0%{-webkit-transform:translateX(-1500px);transform:translateX(-1500px);opacity:0}to{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}@keyframes fade-in-left-lg{0%{-webkit-transform:translateX(-1500px);transform:translateX(-1500px);opacity:0}to{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}.fade-in-left-lg{-webkit-animation-name:fade-in-left-lg;animation-name:fade-in-left-lg}@-webkit-keyframes fade-out-left-lg{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}to{-webkit-transform:translateX(-1500px);transform:translateX(-1500px);opacity:0}}@keyframes fade-out-left-lg{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}to{-webkit-transform:translateX(-1500px);transform:translateX(-1500px);opacity:0}}.fade-out-left-lg{-webkit-animation-name:fade-out-left-lg;animation-name:fade-out-left-lg}@-webkit-keyframes fade-in-right{0%{-webkit-transform:translateX(500px);transform:translateX(500px);opacity:0}to{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}@keyframes fade-in-right{0%{-webkit-transform:translateX(500px);transform:translateX(500px);opacity:0}to{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}.fade-in-right{-webkit-animation-name:fade-in-right;animation-name:fade-in-right}@-webkit-keyframes fade-out-right{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}to{-webkit-transform:translateX(500px);transform:translateX(500px);opacity:0}}@keyframes fade-out-right{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}to{-webkit-transform:translateX(500px);transform:translateX(500px);opacity:0}}.fade-out-right{-webkit-animation-name:fade-out-right;animation-name:fade-out-right}@-webkit-keyframes fade-in-right-sm{0%{-webkit-transform:translateX(100px);transform:translateX(100px);opacity:0}to{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}@keyframes fade-in-right-sm{0%{-webkit-transform:translateX(100px);transform:translateX(100px);opacity:0}to{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}.fade-in-right-sm{-webkit-animation-name:fade-in-right-sm;animation-name:fade-in-right-sm}@-webkit-keyframes fade-out-right-sm{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}to{-webkit-transform:translateX(100px);transform:translateX(100px);opacity:0}}@keyframes fade-out-right-sm{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}to{-webkit-transform:translateX(100px);transform:translateX(100px);opacity:0}}.fade-out-right-sm{-webkit-animation-name:fade-out-right-sm;animation-name:fade-out-right-sm}@-webkit-keyframes fade-in-right-lg{0%{-webkit-transform:translateX(1500px);transform:translateX(1500px);opacity:0}to{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}@keyframes fade-in-right-lg{0%{-webkit-transform:translateX(1500px);transform:translateX(1500px);opacity:0}to{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}.fade-in-right-lg{-webkit-animation-name:fade-in-right-lg;animation-name:fade-in-right-lg}@-webkit-keyframes fade-out-right-lg{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}to{-webkit-transform:translateX(1500px);transform:translateX(1500px);opacity:0}}@keyframes fade-out-right-lg{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}to{-webkit-transform:translateX(1500px);transform:translateX(1500px);opacity:0}}.fade-out-right-lg{-webkit-animation-name:fade-out-right-lg;animation-name:fade-out-right-lg}@-webkit-keyframes rotate-in{0%{-webkit-transform:rotate(-90deg);transform:rotate(-90deg);transform-origin:center center;opacity:0}0%,to{-webkit-transform-origin:center center}to{-webkit-transform:rotate(0);transform:rotate(0);transform-origin:center center;opacity:1}}@keyframes rotate-in{0%{-webkit-transform:rotate(-90deg);transform:rotate(-90deg);transform-origin:center center;opacity:0}0%,to{-webkit-transform-origin:center center}to{-webkit-transform:rotate(0);transform:rotate(0);transform-origin:center center;opacity:1}}.rotate-in{-webkit-animation-name:rotate-in;animation-name:rotate-in}@-webkit-keyframes rotate-out{0%{-webkit-transform:rotate(0);transform:rotate(0);transform-origin:center center;opacity:1}0%,to{-webkit-transform-origin:center center}to{-webkit-transform:rotate(90deg);transform:rotate(90deg);transform-origin:center center;opacity:0}}@keyframes rotate-out{0%{-webkit-transform:rotate(0);transform:rotate(0);transform-origin:center center;opacity:1}0%,to{-webkit-transform-origin:center center}to{-webkit-transform:rotate(90deg);transform:rotate(90deg);transform-origin:center center;opacity:0}}.rotate-out{-webkit-animation-name:rotate-out;animation-name:rotate-out}@-webkit-keyframes rotate-in-sm{0%{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);transform-origin:center center;opacity:0}0%,to{-webkit-transform-origin:center center}to{-webkit-transform:rotate(0);transform:rotate(0);transform-origin:center center;opacity:1}}@keyframes rotate-in-sm{0%{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);transform-origin:center center;opacity:0}0%,to{-webkit-transform-origin:center center}to{-webkit-transform:rotate(0);transform:rotate(0);transform-origin:center center;opacity:1}}.rotate-in-sm{-webkit-animation-name:rotate-in-sm;animation-name:rotate-in-sm}@-webkit-keyframes rotate-out-sm{0%{-webkit-transform:rotate(0);transform:rotate(0);transform-origin:center center;opacity:1}0%,to{-webkit-transform-origin:center center}to{-webkit-transform:rotate(45deg);transform:rotate(45deg);transform-origin:center center;opacity:0}}@keyframes rotate-out-sm{0%{-webkit-transform:rotate(0);transform:rotate(0);transform-origin:center center;opacity:1}0%,to{-webkit-transform-origin:center center}to{-webkit-transform:rotate(45deg);transform:rotate(45deg);transform-origin:center center;opacity:0}}.rotate-out-sm{-webkit-animation-name:rotate-out-sm;animation-name:rotate-out-sm}@-webkit-keyframes rotate-in-lg{0%{-webkit-transform:rotate(-180deg);transform:rotate(-180deg);transform-origin:center center;opacity:0}0%,to{-webkit-transform-origin:center center}to{-webkit-transform:rotate(0);transform:rotate(0);transform-origin:center center;opacity:1}}@keyframes rotate-in-lg{0%{-webkit-transform:rotate(-180deg);transform:rotate(-180deg);transform-origin:center center;opacity:0}0%,to{-webkit-transform-origin:center center}to{-webkit-transform:rotate(0);transform:rotate(0);transform-origin:center center;opacity:1}}.rotate-in-lg{-webkit-animation-name:rotate-in-lg;animation-name:rotate-in-lg}@-webkit-keyframes rotate-out-lg{0%{-webkit-transform:rotate(0);transform:rotate(0);transform-origin:center center;opacity:1}0%,to{-webkit-transform-origin:center center}to{-webkit-transform:rotate(180deg);transform:rotate(180deg);transform-origin:center center;opacity:0}}@keyframes rotate-out-lg{0%{-webkit-transform:rotate(0);transform:rotate(0);transform-origin:center center;opacity:1}0%,to{-webkit-transform-origin:center center}to{-webkit-transform:rotate(180deg);transform:rotate(180deg);transform-origin:center center;opacity:0}}.rotate-out-lg{-webkit-animation-name:rotate-out-lg;animation-name:rotate-out-lg}@-webkit-keyframes flip-in-x{0%{-webkit-transform:perspective(550px) rotateX(90deg);transform:perspective(550px) rotateX(90deg);opacity:0}to{-webkit-transform:perspective(550px) rotateX(0deg);transform:perspective(550px) rotateX(0deg);opacity:1}}@keyframes flip-in-x{0%{-webkit-transform:perspective(550px) rotateX(90deg);transform:perspective(550px) rotateX(90deg);opacity:0}to{-webkit-transform:perspective(550px) rotateX(0deg);transform:perspective(550px) rotateX(0deg);opacity:1}}.flip-in-x{-webkit-animation-name:flip-in-x;animation-name:flip-in-x;-webkit-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes flip-out-x{0%{-webkit-transform:perspective(550px) rotateX(0deg);transform:perspective(550px) rotateX(0deg);opacity:1}to{-webkit-transform:perspective(550px) rotateX(90deg);transform:perspective(550px) rotateX(90deg);opacity:0}}@keyframes flip-out-x{0%{-webkit-transform:perspective(550px) rotateX(0deg);transform:perspective(550px) rotateX(0deg);opacity:1}to{-webkit-transform:perspective(550px) rotateX(90deg);transform:perspective(550px) rotateX(90deg);opacity:0}}.flip-out-x{-webkit-animation-name:flip-out-x;animation-name:flip-out-x;-webkit-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes flip-in-x-nr{0%{-webkit-transform:perspective(100px) rotateX(90deg);transform:perspective(100px) rotateX(90deg);opacity:0}to{-webkit-transform:perspective(100px) rotateX(0deg);transform:perspective(100px) rotateX(0deg);opacity:1}}@keyframes flip-in-x-nr{0%{-webkit-transform:perspective(100px) rotateX(90deg);transform:perspective(100px) rotateX(90deg);opacity:0}to{-webkit-transform:perspective(100px) rotateX(0deg);transform:perspective(100px) rotateX(0deg);opacity:1}}.flip-in-x-nr{-webkit-animation-name:flip-in-x-nr;animation-name:flip-in-x-nr;-webkit-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes flip-out-x-nr{0%{-webkit-transform:perspective(100px) rotateX(0deg);transform:perspective(100px) rotateX(0deg);opacity:1}to{-webkit-transform:perspective(100px) rotateX(90deg);transform:perspective(100px) rotateX(90deg);opacity:0}}@keyframes flip-out-x-nr{0%{-webkit-transform:perspective(100px) rotateX(0deg);transform:perspective(100px) rotateX(0deg);opacity:1}to{-webkit-transform:perspective(100px) rotateX(90deg);transform:perspective(100px) rotateX(90deg);opacity:0}}.flip-out-x-nr{-webkit-animation-name:flip-out-x-nr;animation-name:flip-out-x-nr;-webkit-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes flip-in-x-fr{0%{-webkit-transform:perspective(1000px) rotateX(90deg);transform:perspective(1000px) rotateX(90deg);opacity:0}to{-webkit-transform:perspective(1000px) rotateX(0deg);transform:perspective(1000px) rotateX(0deg);opacity:1}}@keyframes flip-in-x-fr{0%{-webkit-transform:perspective(1000px) rotateX(90deg);transform:perspective(1000px) rotateX(90deg);opacity:0}to{-webkit-transform:perspective(1000px) rotateX(0deg);transform:perspective(1000px) rotateX(0deg);opacity:1}}.flip-in-x-fr{-webkit-animation-name:flip-in-x-fr;animation-name:flip-in-x-fr;-webkit-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes flip-out-x-fr{0%{-webkit-transform:perspective(1000px) rotateX(0deg);transform:perspective(1000px) rotateX(0deg);opacity:1}to{-webkit-transform:perspective(1000px) rotateX(90deg);transform:perspective(1000px) rotateX(90deg);opacity:0}}@keyframes flip-out-x-fr{0%{-webkit-transform:perspective(1000px) rotateX(0deg);transform:perspective(1000px) rotateX(0deg);opacity:1}to{-webkit-transform:perspective(1000px) rotateX(90deg);transform:perspective(1000px) rotateX(90deg);opacity:0}}.flip-out-x-fr{-webkit-animation-name:flip-out-x-fr;animation-name:flip-out-x-fr;-webkit-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes flip-in-y{0%{-webkit-transform:perspective(550px) rotateY(90deg);transform:perspective(550px) rotateY(90deg);opacity:0}to{-webkit-transform:perspective(550px) rotateY(0deg);transform:perspective(550px) rotateY(0deg);opacity:1}}@keyframes flip-in-y{0%{-webkit-transform:perspective(550px) rotateY(90deg);transform:perspective(550px) rotateY(90deg);opacity:0}to{-webkit-transform:perspective(550px) rotateY(0deg);transform:perspective(550px) rotateY(0deg);opacity:1}}.flip-in-y{-webkit-animation-name:flip-in-y;animation-name:flip-in-y;-webkit-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes flip-out-y{0%{-webkit-transform:perspective(550px) rotateY(0deg);transform:perspective(550px) rotateY(0deg);opacity:1}to{-webkit-transform:perspective(550px) rotateY(90deg);transform:perspective(550px) rotateY(90deg);opacity:0}}@keyframes flip-out-y{0%{-webkit-transform:perspective(550px) rotateY(0deg);transform:perspective(550px) rotateY(0deg);opacity:1}to{-webkit-transform:perspective(550px) rotateY(90deg);transform:perspective(550px) rotateY(90deg);opacity:0}}.flip-out-y{-webkit-animation-name:flip-out-y;animation-name:flip-out-y;-webkit-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes flip-in-y-nr{0%{-webkit-transform:perspective(100px) rotateY(90deg);transform:perspective(100px) rotateY(90deg);opacity:0}to{-webkit-transform:perspective(100px) rotateY(0deg);transform:perspective(100px) rotateY(0deg);opacity:1}}@keyframes flip-in-y-nr{0%{-webkit-transform:perspective(100px) rotateY(90deg);transform:perspective(100px) rotateY(90deg);opacity:0}to{-webkit-transform:perspective(100px) rotateY(0deg);transform:perspective(100px) rotateY(0deg);opacity:1}}.flip-in-y-nr{-webkit-animation-name:flip-in-y-nr;animation-name:flip-in-y-nr;-webkit-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes flip-out-y-nr{0%{-webkit-transform:perspective(100px) rotateY(0deg);transform:perspective(100px) rotateY(0deg);opacity:1}to{-webkit-transform:perspective(100px) rotateY(90deg);transform:perspective(100px) rotateY(90deg);opacity:0}}@keyframes flip-out-y-nr{0%{-webkit-transform:perspective(100px) rotateY(0deg);transform:perspective(100px) rotateY(0deg);opacity:1}to{-webkit-transform:perspective(100px) rotateY(90deg);transform:perspective(100px) rotateY(90deg);opacity:0}}.flip-out-y-nr{-webkit-animation-name:flip-out-y-nr;animation-name:flip-out-y-nr;-webkit-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes flip-in-y-fr{0%{-webkit-transform:perspective(1000px) rotateY(90deg);transform:perspective(1000px) rotateY(90deg);opacity:0}to{-webkit-transform:perspective(1000px) rotateY(0deg);transform:perspective(1000px) rotateY(0deg);opacity:1}}@keyframes flip-in-y-fr{0%{-webkit-transform:perspective(1000px) rotateY(90deg);transform:perspective(1000px) rotateY(90deg);opacity:0}to{-webkit-transform:perspective(1000px) rotateY(0deg);transform:perspective(1000px) rotateY(0deg);opacity:1}}.flip-in-y-fr{-webkit-animation-name:flip-in-y-fr;animation-name:flip-in-y-fr;-webkit-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes flip-out-y-fr{0%{-webkit-transform:perspective(1000px) rotateY(0deg);transform:perspective(1000px) rotateY(0deg);opacity:1}to{-webkit-transform:perspective(1000px) rotateY(90deg);transform:perspective(1000px) rotateY(90deg);opacity:0}}@keyframes flip-out-y-fr{0%{-webkit-transform:perspective(1000px) rotateY(0deg);transform:perspective(1000px) rotateY(0deg);opacity:1}to{-webkit-transform:perspective(1000px) rotateY(90deg);transform:perspective(1000px) rotateY(90deg);opacity:0}}.flip-out-y-fr{-webkit-animation-name:flip-out-y-fr;animation-name:flip-out-y-fr;-webkit-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes zoom-in{0%{-webkit-transform:scale(.7);transform:scale(.7);opacity:0}to{opacity:1}}@keyframes zoom-in{0%{-webkit-transform:scale(.7);transform:scale(.7);opacity:0}to{opacity:1}}.zoom-in{-webkit-animation-name:zoom-in;animation-name:zoom-in}@-webkit-keyframes zoom-out{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}50%{-webkit-transform:scale(.7);transform:scale(.7)}50%,to{opacity:0}}@keyframes zoom-out{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}50%{-webkit-transform:scale(.7);transform:scale(.7)}50%,to{opacity:0}}.zoom-out{-webkit-animation-name:zoom-out;animation-name:zoom-out}@-webkit-keyframes zoom-in-sm{0%{-webkit-transform:scale(.95);transform:scale(.95);opacity:0}to{opacity:1}}@keyframes zoom-in-sm{0%{-webkit-transform:scale(.95);transform:scale(.95);opacity:0}to{opacity:1}}.zoom-in-sm{-webkit-animation-name:zoom-in-sm;animation-name:zoom-in-sm}@-webkit-keyframes zoom-out-sm{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}50%{-webkit-transform:scale(.95);transform:scale(.95)}50%,to{opacity:0}}@keyframes zoom-out-sm{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}50%{-webkit-transform:scale(.95);transform:scale(.95)}50%,to{opacity:0}}.zoom-out-sm{-webkit-animation-name:zoom-out-sm;animation-name:zoom-out-sm}@-webkit-keyframes zoom-in-lg{0%{-webkit-transform:scale(.4);transform:scale(.4);opacity:0}to{opacity:1}}@keyframes zoom-in-lg{0%{-webkit-transform:scale(.4);transform:scale(.4);opacity:0}to{opacity:1}}.zoom-in-lg{-webkit-animation-name:zoom-in-lg;animation-name:zoom-in-lg}@-webkit-keyframes zoom-out-lg{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}50%{-webkit-transform:scale(.4);transform:scale(.4)}50%,to{opacity:0}}@keyframes zoom-out-lg{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}50%{-webkit-transform:scale(.4);transform:scale(.4)}50%,to{opacity:0}}.zoom-out-lg{-webkit-animation-name:zoom-out-lg;animation-name:zoom-out-lg}@-webkit-keyframes overlay-slide-in-top{0%{height:100%}to{height:0}}@keyframes overlay-slide-in-top{0%{height:100%}to{height:0}}.overlay-slide-in-top{top:0;height:0;-webkit-animation-name:overlay-slide-in-top;animation-name:overlay-slide-in-top}@-webkit-keyframes overlay-slide-out-top{0%{height:0}to{height:100%}}@keyframes overlay-slide-out-top{0%{height:0}to{height:100%}}.overlay-slide-out-top{top:0;height:100%;-webkit-animation-name:overlay-slide-out-top;animation-name:overlay-slide-out-top}@-webkit-keyframes overlay-slide-in-bottom{0%{height:100%}to{height:0}}@keyframes overlay-slide-in-bottom{0%{height:100%}to{height:0}}.overlay-slide-in-bottom{bottom:0;height:0;-webkit-animation-name:overlay-slide-in-bottom;animation-name:overlay-slide-in-bottom}@-webkit-keyframes overlay-slide-out-bottom{0%{height:0}to{height:100%}}@keyframes overlay-slide-out-bottom{0%{height:0}to{height:100%}}.overlay-slide-out-bottom{bottom:0;height:100%;-webkit-animation-name:overlay-slide-out-bottom;animation-name:overlay-slide-out-bottom}@-webkit-keyframes overlay-slide-in-left{0%{width:100%}to{width:0}}@keyframes overlay-slide-in-left{0%{width:100%}to{width:0}}.overlay-slide-in-left{width:0;-webkit-animation-name:overlay-slide-in-left;animation-name:overlay-slide-in-left}@-webkit-keyframes overlay-slide-out-left{0%{width:0}to{width:100%}}@keyframes overlay-slide-out-left{0%{width:0}to{width:100%}}.overlay-slide-out-left{left:0;width:100%;-webkit-animation-name:overlay-slide-out-left;animation-name:overlay-slide-out-left}@-webkit-keyframes overlay-slide-in-right{0%{width:100%}to{width:0}}@keyframes overlay-slide-in-right{0%{width:100%}to{width:0}}.overlay-slide-in-right{right:0;width:0;-webkit-animation-name:overlay-slide-in-right;animation-name:overlay-slide-in-right}@-webkit-keyframes overlay-slide-out-right{0%{width:0}to{width:100%}}@keyframes overlay-slide-out-right{0%{width:0}to{width:100%}}.overlay-slide-out-right{right:0;width:100%;-webkit-animation-name:overlay-slide-out-right;animation-name:overlay-slide-out-right}
             body{transform-origin:50% 50% !important;-webkit-transform-origin:50% 50% !important;-ms-transform-origin:50% 50% !important;}
         </style>
    <style type="text/css">#u25604.size_fluid_width_height iframe { position:absolute; left:0; top:0; }</style><style type="text/css">#u25614.size_fluid_width_height iframe { position:absolute; left:0; top:0; }</style><style type="text/css">#u25624.size_fluid_width_height iframe { position:absolute; left:0; top:0; }</style><style type="text/css">#u25634.size_fluid_width_height iframe { position:absolute; left:0; top:0; }</style><style type="text/css">#u25644.size_fluid_width_height iframe { position:absolute; left:0; top:0; }</style><style type="text/css">#u25654.size_fluid_width_height iframe { position:absolute; left:0; top:0; }</style><style type="text/css">#u25659.size_fluid_width_height iframe { position:absolute; left:0; top:0; }</style>
 </head>
 <body>

  <div class="breakpoint active" id="bp_infinity" data-min-width="1001"><!-- responsive breakpoint node -->
   <div class="clearfix borderbox" id="page"><!-- group -->
    <div class="clearfix grpelem" id="pu94"><!-- group -->
     <div class="browser_width shared_content" id="u94-bw" data-content-guid="u94-bw_content">
      <div id="u94"><!-- simple frame --></div>
     </div>
     <a class="nonblock nontext clip_frame shared_content" id="u95" href="index.html" data-href="page:U93" data-content-guid="u95_content"><!-- image --><img class="block temp_no_img_src" id="u95_img" data-orig-src="images/logo-banda-rock-sao-paulo-bar-pub-send-rock.png?crc=3841909168" alt="Logo da banda de rock Send Rock, que atua em bares e pubs na cidade de São Paulo, São Bernardo do Campo, Santo André, São Caetano e todo o ABC." title="Logo banda Send Rock" width="307" height="63" src="images/blank.gif?crc=4208392903"/></a>
     <nav class="MenuBar clearfix" id="menuu97"><!-- horizontal box -->
      <div class="MenuItemContainer clearfix grpelem" id="u105"><!-- vertical box -->
       <a class="nonblock nontext MenuItem MenuItemWithSubMenu clearfix colelem" id="u108" href="index.html" data-href="page:U93"><!-- horizontal box --><div class="MenuItemLabel NoWrap clearfix grpelem" id="u110-4" data-IBE-flags="txtStyleSrc" data-sizePolicy="fixed" data-pintopage="page_fixedLeft"><!-- content --><p class="shared_content" data-content-guid="u110-4_0_content">Início</p></div></a>
      </div>
      <div class="MenuItemContainer clearfix grpelem" id="u434"><!-- vertical box -->
       <a class="nonblock nontext MenuItem MenuItemWithSubMenu clearfix colelem" id="u435" href="sobre-a-banda.html" data-href="page:U433"><!-- horizontal box --><div class="MenuItemLabel NoWrap clearfix grpelem" id="u436-4" data-IBE-flags="txtStyleSrc" data-sizePolicy="fixed" data-pintopage="page_fixedLeft"><!-- content --><p class="shared_content" data-content-guid="u436-4_0_content">Sobre Nós</p></div></a>
      </div>
      <div class="MenuItemContainer clearfix grpelem" id="u467"><!-- vertical box -->
       <a class="nonblock nontext MenuItem MenuItemWithSubMenu MuseMenuActive clearfix colelem" id="u468" href="videos.html" data-href="page:U466"><!-- horizontal box --><div class="MenuItemLabel NoWrap clearfix grpelem" id="u469-4" data-IBE-flags="txtStyleSrc" data-sizePolicy="fixed" data-pintopage="page_fixedLeft"><!-- content --><p class="shared_content" data-content-guid="u469-4_0_content">Vídeos</p></div></a>
      </div>
      <div class="MenuItemContainer clearfix grpelem" id="u500"><!-- vertical box -->
       <a class="nonblock nontext MenuItem MenuItemWithSubMenu clearfix colelem" id="u501" href="imagens.html" data-href="page:U499"><!-- horizontal box --><div class="MenuItemLabel NoWrap clearfix grpelem" id="u502-4" data-IBE-flags="txtStyleSrc" data-sizePolicy="fixed" data-pintopage="page_fixedLeft"><!-- content --><p class="shared_content" data-content-guid="u502-4_0_content">Imagens</p></div></a>
      </div>
      <div class="MenuItemContainer clearfix grpelem" id="u22115"><!-- vertical box -->
       <a class="nonblock nontext MenuItem MenuItemWithSubMenu clearfix colelem" id="u22118" href="repertorio.html" data-href="page:U20934"><!-- horizontal box --><div class="MenuItemLabel NoWrap clearfix grpelem" id="u22121-4" data-IBE-flags="txtStyleSrc" data-sizePolicy="fixed" data-pintopage="page_fixedLeft"><!-- content --><p class="shared_content" data-content-guid="u22121-4_0_content">Repertório</p></div></a>
      </div>
      <div class="MenuItemContainer clearfix grpelem" id="u533"><!-- vertical box -->
       <a class="nonblock nontext MenuItem MenuItemWithSubMenu clearfix colelem" id="u536" href="contato.html" data-href="page:U532"><!-- horizontal box --><div class="MenuItemLabel NoWrap clearfix grpelem" id="u538-4" data-IBE-flags="txtStyleSrc" data-sizePolicy="fixed" data-pintopage="page_fixedLeft"><!-- content --><p class="shared_content" data-content-guid="u538-4_0_content">Contato</p></div></a>
      </div>
     </nav>
     <div id="u133" class="shared_content" data-content-guid="u133_content"><!-- simple frame --></div>
     <div id="u134" class="shared_content" data-content-guid="u134_content"><!-- simple frame --></div>
     <div id="u135" class="shared_content" data-content-guid="u135_content"><!-- simple frame --></div>
     <div id="u136" class="shared_content" data-content-guid="u136_content"><!-- simple frame --></div>
     <div id="u22203" class="shared_content" data-content-guid="u22203_content"><!-- simple frame --></div>
     <div class="browser_width shared_content" id="u137-bw" data-content-guid="u137-bw_content">
      <div id="u137"><!-- simple frame --></div>
     </div>
     <div class="clearfix shared_content" id="u138-4" data-IBE-flags="txtStyleSrc" data-content-guid="u138-4_content"><!-- content -->
      <h4>Curta nossas redes sociais</h4>
     </div>
     <a class="nonblock nontext clip_frame shared_content" id="u139" href="https://www.instagram.com/bandasendrock" data-content-guid="u139_content"><!-- image --><img class="block temp_no_img_src" id="u139_img" data-orig-src="images/icone-instagram.png?crc=226167549" alt="Icone da rede social Instagram" title="Instagram" width="24" height="24" src="images/blank.gif?crc=4208392903"/></a>
     <a class="nonblock nontext clip_frame shared_content" id="u141" href="https://www.youtube.com/channel/UC5K61C4yuaNrrBjhcUKYwkQ" data-content-guid="u141_content"><!-- image --><img class="block temp_no_img_src" id="u141_img" data-orig-src="images/icone-youtube.png?crc=213490186" alt="Icone da rede social Youtube" title="Youtube" width="24" height="24" src="images/blank.gif?crc=4208392903"/></a>
     <a class="nonblock nontext clip_frame shared_content" id="u143" href="https://www.facebook.com/bandasendrock" data-content-guid="u143_content"><!-- image --><img class="block temp_no_img_src" id="u143_img" data-orig-src="images/icone-facebook.png?crc=272153124" alt="Icone da rede social Facebook" title="Facebook" width="24" height="24" src="images/blank.gif?crc=4208392903"/></a>
    </div>
    <div class="clearfix grpelem" id="pu22290"><!-- column -->
     <div class="size_fixed colelem shared_content" id="u22290" data-sizePolicy="fixed" data-pintopage="page_fluidx" data-content-guid="u22290_content"><!-- custom html -->
      
        
    
     </div>
     <div class="clearfix colelem" id="pu19486"><!-- group -->
      <div class="browser_width grpelem" id="u19486-bw">
       <div id="u19486"><!-- column -->
        <div class="clearfix" id="u19486_align_to_page">
         <div class="size_fixed colelem shared_content" id="u25604" data-sizePolicy="fixed" data-pintopage="page_fixedCenter" data-content-guid="u25604_content"><!-- custom html -->
          
<iframe class="actAsDiv" style="width:100%;height:100%;" src="//www.youtube.com/embed/VYyqXwXLsME?autoplay=0&loop=0&showinfo=0&theme=dark&color=red&controls=1&modestbranding=0&start=0&fs=0&iv_load_policy=3&wmode=transparent&rel=0" frameborder="0" allowfullscreen></iframe>

         </div>
         <div class="size_fixed colelem shared_content" id="u25614" data-sizePolicy="fixed" data-pintopage="page_fixedCenter" data-content-guid="u25614_content"><!-- custom html -->
          
<iframe class="actAsDiv" style="width:100%;height:100%;" src="//www.youtube.com/embed/vnLWKmBJZNo?autoplay=0&loop=0&showinfo=0&theme=dark&color=red&controls=1&modestbranding=0&start=0&fs=0&iv_load_policy=3&wmode=transparent&rel=0" frameborder="0" allowfullscreen></iframe>

         </div>
         <div class="size_fixed colelem shared_content" id="u25624" data-sizePolicy="fixed" data-pintopage="page_fixedCenter" data-content-guid="u25624_content"><!-- custom html -->
          
<iframe class="actAsDiv" style="width:100%;height:100%;" src="//www.youtube.com/embed/MZGGDF8wlDE?autoplay=0&loop=0&showinfo=0&theme=dark&color=red&controls=1&modestbranding=0&start=0&fs=0&iv_load_policy=3&wmode=transparent&rel=0" frameborder="0" allowfullscreen></iframe>

         </div>
         <div class="size_fixed colelem shared_content" id="u25634" data-sizePolicy="fixed" data-pintopage="page_fixedCenter" data-content-guid="u25634_content"><!-- custom html -->
          
<iframe class="actAsDiv" style="width:100%;height:100%;" src="//www.youtube.com/embed/bsgWiGLh1tc?autoplay=0&loop=0&showinfo=0&theme=dark&color=red&controls=1&modestbranding=0&start=0&fs=0&iv_load_policy=3&wmode=transparent&rel=0" frameborder="0" allowfullscreen></iframe>

         </div>
         <div class="size_fixed colelem shared_content" id="u25644" data-sizePolicy="fixed" data-pintopage="page_fixedCenter" data-content-guid="u25644_content"><!-- custom html -->
          
<iframe class="actAsDiv" style="width:100%;height:100%;" src="//www.youtube.com/embed/yu7M7DbYf3E?autoplay=0&loop=0&showinfo=0&theme=dark&color=red&controls=1&modestbranding=0&start=0&fs=0&iv_load_policy=3&wmode=transparent&rel=0" frameborder="0" allowfullscreen></iframe>

         </div>
         <div class="size_fixed colelem shared_content" id="u25654" data-sizePolicy="fixed" data-pintopage="page_fixedCenter" data-content-guid="u25654_content"><!-- custom html -->
          
<iframe class="actAsDiv" style="width:100%;height:100%;" src="//www.youtube.com/embed/gVqmhzg9Mac?autoplay=0&loop=0&showinfo=0&theme=dark&color=red&controls=1&modestbranding=0&start=0&fs=0&iv_load_policy=3&wmode=transparent&rel=0" frameborder="0" allowfullscreen></iframe>

         </div>
         <div class="size_fixed colelem shared_content" id="u25659" data-sizePolicy="fixed" data-pintopage="page_fixedCenter" data-content-guid="u25659_content"><!-- custom html -->
          
<iframe class="actAsDiv" style="width:100%;height:100%;" src="//www.youtube.com/embed/dZ675jp9svY?autoplay=0&loop=0&showinfo=0&theme=dark&color=red&controls=1&modestbranding=0&start=0&fs=0&iv_load_policy=3&wmode=transparent&rel=0" frameborder="0" allowfullscreen></iframe>

         </div>
        </div>
       </div>
      </div>
      <div class="browser_width grpelem shared_content" id="u19489-4-bw" data-content-guid="u19489-4-bw_content">
       <!-- m_editable region-id="editable-static-tag-U19489-BP_infinity" template="videos.html" data-type="html" data-ice-options="disableImageResize,link,txtStyleTarget" -->
       <div class="clearfix" id="u19489-4" data-muse-uid="U19489" data-muse-type="txt_frame" data-IBE-flags="txtStyleSrc"><!-- content -->
        <h1>Vídeos da banda</h1>
       </div>
       <!-- /m_editable -->
      </div>
      <div class="browser_width grpelem shared_content" id="u22308-4-bw" data-content-guid="u22308-4-bw_content">
       <!-- m_editable region-id="editable-static-tag-U22308-BP_infinity" template="videos.html" data-type="html" data-ice-options="disableImageResize,link,txtStyleTarget" -->
       <div class="clearfix" id="u22308-4" data-muse-uid="U22308" data-muse-type="txt_frame" data-IBE-flags="txtStyleSrc"><!-- content -->
        <h2>The Police - Message in a Bottle</h2>
       </div>
       <!-- /m_editable -->
      </div>
      <div class="browser_width grpelem shared_content" id="u22324-4-bw" data-content-guid="u22324-4-bw_content">
       <!-- m_editable region-id="editable-static-tag-U22324-BP_infinity" template="videos.html" data-type="html" data-ice-options="disableImageResize,link,txtStyleTarget" -->
       <div class="clearfix" id="u22324-4" data-muse-uid="U22324" data-muse-type="txt_frame" data-IBE-flags="txtStyleSrc"><!-- content -->
        <h2>Cazuza - Ideologia</h2>
       </div>
       <!-- /m_editable -->
      </div>
      <div class="browser_width grpelem shared_content" id="u22332-4-bw" data-content-guid="u22332-4-bw_content">
       <!-- m_editable region-id="editable-static-tag-U22332-BP_infinity" template="videos.html" data-type="html" data-ice-options="disableImageResize,link,txtStyleTarget" -->
       <div class="clearfix" id="u22332-4" data-muse-uid="U22332" data-muse-type="txt_frame" data-IBE-flags="txtStyleSrc"><!-- content -->
        <h2>Garth Brooks - Standing Outside the Fire</h2>
       </div>
       <!-- /m_editable -->
      </div>
      <div class="browser_width grpelem shared_content" id="u22340-4-bw" data-content-guid="u22340-4-bw_content">
       <!-- m_editable region-id="editable-static-tag-U22340-BP_infinity" template="videos.html" data-type="html" data-ice-options="disableImageResize,link,txtStyleTarget" -->
       <div class="clearfix" id="u22340-4" data-muse-uid="U22340" data-muse-type="txt_frame" data-IBE-flags="txtStyleSrc"><!-- content -->
        <h2>Guns and Roses - Welcome to the Jungle</h2>
       </div>
       <!-- /m_editable -->
      </div>
      <div class="browser_width grpelem shared_content" id="u22348-4-bw" data-content-guid="u22348-4-bw_content">
       <!-- m_editable region-id="editable-static-tag-U22348-BP_infinity" template="videos.html" data-type="html" data-ice-options="disableImageResize,link,txtStyleTarget" -->
       <div class="clearfix" id="u22348-4" data-muse-uid="U22348" data-muse-type="txt_frame" data-IBE-flags="txtStyleSrc"><!-- content -->
        <h2>Bon Jovi - Born to be my Baby</h2>
       </div>
       <!-- /m_editable -->
      </div>
      <div class="browser_width grpelem shared_content" id="u22364-4-bw" data-content-guid="u22364-4-bw_content">
       <!-- m_editable region-id="editable-static-tag-U22364-BP_infinity" template="videos.html" data-type="html" data-ice-options="disableImageResize,link,txtStyleTarget" -->
       <div class="clearfix" id="u22364-4" data-muse-uid="U22364" data-muse-type="txt_frame" data-IBE-flags="txtStyleSrc"><!-- content -->
        <h2>Mr. Big - Green Tinted Sixties Mind</h2>
       </div>
       <!-- /m_editable -->
      </div>
      <div class="browser_width grpelem shared_content" id="u22380-4-bw" data-content-guid="u22380-4-bw_content">
       <!-- m_editable region-id="editable-static-tag-U22380-BP_infinity" template="videos.html" data-type="html" data-ice-options="disableImageResize,link,txtStyleTarget" -->
       <div class="clearfix" id="u22380-4" data-muse-uid="U22380" data-muse-type="txt_frame" data-IBE-flags="txtStyleSrc"><!-- content -->
        <h2>Legião Urbana - Quando o Sol Bater na Janela do seu Quarto</h2>
       </div>
       <!-- /m_editable -->
      </div>
     </div>
    </div>
    <div class="verticalspacer" data-offset-top="5167" data-content-above-spacer="5166" data-content-below-spacer="154" data-sizePolicy="fixed" data-pintopage="page_fixedLeft"></div>
    <div class="clearfix grpelem shared_content" id="pu19517" data-content-guid="pu19517_content"><!-- group -->
     <div class="browser_width grpelem shared_content" id="u19517-bw" data-content-guid="u19517-bw_content">
      <div id="u19517"><!-- simple frame --></div>
     </div>
     <div class="browser_width grpelem shared_content" id="u24425-bw" data-content-guid="u24425-bw_content">
      <div id="u24425"><!-- simple frame --></div>
     </div>
     <div class="browser_width grpelem" id="u554-bw">
      <div id="u554"><!-- column -->
       <div class="clearfix" id="u554_align_to_page">
        <div class="clearfix colelem" id="pu1514"><!-- group -->
         <div class="clip_frame grpelem shared_content" id="u1514" data-sizePolicy="fixed" data-pintopage="page_fixedCenter" data-content-guid="u1514_content"><!-- image -->
          <img class="block temp_no_img_src" id="u1514_img" data-orig-src="images/icone-email.png?crc=3781701197" alt="Icone de email para contato" title="Email" width="33" height="25" src="images/blank.gif?crc=4208392903"/>
         </div>
         <div class="clearfix grpelem shared_content" id="u1516-4" data-IBE-flags="txtStyleSrc" data-sizePolicy="fixed" data-pintopage="page_fixedCenter" data-content-guid="u1516-4_content"><!-- content -->
          <h4>contato@sendrock.com.br</h4>
         </div>
         <div class="clip_frame grpelem shared_content" id="u1512" data-sizePolicy="fixed" data-pintopage="page_fixedCenter" data-content-guid="u1512_content"><!-- image -->
          <img class="block temp_no_img_src" id="u1512_img" data-orig-src="images/icone-whatsapp.png?crc=3925080028" alt="Icone da rede social para contato Whatsapp" title="Whatsapp" width="30" height="30" src="images/blank.gif?crc=4208392903"/>
         </div>
         <div class="clearfix grpelem shared_content" id="u1517-6" data-IBE-flags="txtStyleSrc" data-sizePolicy="fixed" data-pintopage="page_fixedCenter" data-content-guid="u1517-6_content"><!-- content -->
          <h4>(11) 96633-2172</h4>
          <h4>(11) 98315-4411</h4>
         </div>
        </div>
        <div class="clearfix colelem shared_content" id="u1518-6" data-IBE-flags="txtStyleSrc" data-sizePolicy="fixed" data-pintopage="page_fixedCenter" data-content-guid="u1518-6_content"><!-- content -->
         <p>Copyright © 2018 - www.sendrock.com.br</p>
         <p>Todos os direitos reservados. Não é permitida a utilização dos conteúdos aqui apresentados bem como a reprodução total ou parcial sem prévia autorização dos criadores.</p>
        </div>
       </div>
      </div>
     </div>
     <div class="browser_width grpelem shared_content" id="u12049-bw" data-content-guid="u12049-bw_content">
      <div id="u12049"><!-- simple frame --></div>
     </div>
    </div>
   </div>
  </div>
  <div class="breakpoint" id="bp_1000" data-min-width="801" data-max-width="1000"><!-- responsive breakpoint node -->
   <div class="clearfix borderbox temp_no_id" data-orig-id="page"><!-- group -->
    <div class="clearfix grpelem temp_no_id" data-orig-id="pu94"><!-- group -->
     <span class="browser_width placeholder" data-placeholder-for="u94-bw_content"><!-- placeholder node --></span>
     <a class="nonblock nontext clip_frame temp_no_id" href="index.html" data-href="page:U93" data-orig-id="u95"><!-- image --><img class="block temp_no_id temp_no_img_src" data-orig-src="images/logo-banda-rock-sao-paulo-bar-pub-send-rock.png?crc=3841909168" alt="Logo da banda de rock Send Rock, que atua em bares e pubs na cidade de São Paulo, São Bernardo do Campo, Santo André, São Caetano e todo o ABC." title="Logo banda Send Rock" width="260" height="53" data-orig-id="u95_img" src="images/blank.gif?crc=4208392903"/></a>
     <nav class="MenuBar clearfix temp_no_id" data-orig-id="menuu97"><!-- horizontal box -->
      <div class="MenuItemContainer clearfix grpelem temp_no_id" data-orig-id="u105"><!-- vertical box -->
       <a class="nonblock nontext MenuItem MenuItemWithSubMenu clearfix colelem temp_no_id" href="index.html" data-href="page:U93" data-orig-id="u108"><!-- horizontal box --><div class="MenuItemLabel NoWrap clearfix grpelem temp_no_id" data-IBE-flags="txtStyleSrc" data-sizePolicy="fixed" data-pintopage="page_fixedLeft" data-orig-id="u110-4"><!-- content --><span class="placeholder" data-placeholder-for="u110-4_0_content"><!-- placeholder node --></span></div></a>
      </div>
      <div class="MenuItemContainer clearfix grpelem temp_no_id" data-orig-id="u434"><!-- vertical box -->
       <a class="nonblock nontext MenuItem MenuItemWithSubMenu clearfix colelem temp_no_id" href="sobre-a-banda.html" data-href="page:U433" data-orig-id="u435"><!-- horizontal box --><div class="MenuItemLabel NoWrap clearfix grpelem temp_no_id" data-IBE-flags="txtStyleSrc" data-sizePolicy="fixed" data-pintopage="page_fixedLeft" data-orig-id="u436-4"><!-- content --><span class="placeholder" data-placeholder-for="u436-4_0_content"><!-- placeholder node --></span></div></a>
      </div>
      <div class="MenuItemContainer clearfix grpelem temp_no_id" data-orig-id="u467"><!-- vertical box -->
       <a class="nonblock nontext MenuItem MenuItemWithSubMenu MuseMenuActive clearfix colelem temp_no_id" href="videos.html" data-href="page:U466" data-orig-id="u468"><!-- horizontal box --><div class="MenuItemLabel NoWrap clearfix grpelem temp_no_id" data-IBE-flags="txtStyleSrc" data-sizePolicy="fixed" data-pintopage="page_fixedLeft" data-orig-id="u469-4"><!-- content --><span class="placeholder" data-placeholder-for="u469-4_0_content"><!-- placeholder node --></span></div></a>
      </div>
      <div class="MenuItemContainer clearfix grpelem temp_no_id" data-orig-id="u500"><!-- vertical box -->
       <a class="nonblock nontext MenuItem MenuItemWithSubMenu clearfix colelem temp_no_id" href="imagens.html" data-href="page:U499" data-orig-id="u501"><!-- horizontal box --><div class="MenuItemLabel NoWrap clearfix grpelem temp_no_id" data-IBE-flags="txtStyleSrc" data-sizePolicy="fixed" data-pintopage="page_fixedLeft" data-orig-id="u502-4"><!-- content --><span class="placeholder" data-placeholder-for="u502-4_0_content"><!-- placeholder node --></span></div></a>
      </div>
      <div class="MenuItemContainer clearfix grpelem temp_no_id" data-orig-id="u22115"><!-- vertical box -->
       <a class="nonblock nontext MenuItem MenuItemWithSubMenu clearfix colelem temp_no_id" href="repertorio.html" data-href="page:U20934" data-orig-id="u22118"><!-- horizontal box --><div class="MenuItemLabel NoWrap clearfix grpelem temp_no_id" data-IBE-flags="txtStyleSrc" data-sizePolicy="fixed" data-pintopage="page_fixedLeft" data-orig-id="u22121-4"><!-- content --><span class="placeholder" data-placeholder-for="u22121-4_0_content"><!-- placeholder node --></span></div></a>
      </div>
      <div class="MenuItemContainer clearfix grpelem temp_no_id" data-orig-id="u533"><!-- vertical box -->
       <a class="nonblock nontext MenuItem MenuItemWithSubMenu clearfix colelem temp_no_id" href="contato.html" data-href="page:U532" data-orig-id="u536"><!-- horizontal box --><div class="MenuItemLabel NoWrap clearfix grpelem temp_no_id" data-IBE-flags="txtStyleSrc" data-sizePolicy="fixed" data-pintopage="page_fixedLeft" data-orig-id="u538-4"><!-- content --><span class="placeholder" data-placeholder-for="u538-4_0_content"><!-- placeholder node --></span></div></a>
      </div>
     </nav>
     <span class="placeholder" data-placeholder-for="u133_content"><!-- placeholder node --></span>
     <span class="placeholder" data-placeholder-for="u134_content"><!-- placeholder node --></span>
     <span class="placeholder" data-placeholder-for="u135_content"><!-- placeholder node --></span>
     <span class="placeholder" data-placeholder-for="u136_content"><!-- placeholder node --></span>
     <span class="placeholder" data-placeholder-for="u22203_content"><!-- placeholder node --></span>
     <span class="browser_width placeholder" data-placeholder-for="u137-bw_content"><!-- placeholder node --></span>
     <span class="clearfix placeholder" data-placeholder-for="u138-4_content"><!-- placeholder node --></span>
     <span class="nonblock nontext clip_frame placeholder" data-placeholder-for="u139_content"><!-- placeholder node --></span>
     <span class="nonblock nontext clip_frame placeholder" data-placeholder-for="u141_content"><!-- placeholder node --></span>
     <span class="nonblock nontext clip_frame placeholder" data-placeholder-for="u143_content"><!-- placeholder node --></span>
    </div>
    <div class="clearfix grpelem temp_no_id shared_content" data-orig-id="pu22290" data-content-guid="pu22290_content"><!-- column -->
     <span class="size_fixed colelem placeholder" data-placeholder-for="u22290_content"><!-- placeholder node --></span>
     <div class="clearfix colelem temp_no_id" data-orig-id="pu19486"><!-- group -->
      <div class="browser_width grpelem temp_no_id" data-orig-id="u19486-bw">
       <div class="temp_no_id" data-orig-id="u19486"><!-- simple frame --></div>
      </div>
      <span class="browser_width grpelem placeholder" data-placeholder-for="u19489-4-bw_content"><!-- placeholder node --></span>
      <span class="browser_width grpelem placeholder" data-placeholder-for="u22308-4-bw_content"><!-- placeholder node --></span>
      <span class="browser_width grpelem placeholder" data-placeholder-for="u22324-4-bw_content"><!-- placeholder node --></span>
      <span class="browser_width grpelem placeholder" data-placeholder-for="u22332-4-bw_content"><!-- placeholder node --></span>
      <span class="browser_width grpelem placeholder" data-placeholder-for="u22340-4-bw_content"><!-- placeholder node --></span>
      <span class="browser_width grpelem placeholder" data-placeholder-for="u22348-4-bw_content"><!-- placeholder node --></span>
      <span class="browser_width grpelem placeholder" data-placeholder-for="u22364-4-bw_content"><!-- placeholder node --></span>
      <span class="browser_width grpelem placeholder" data-placeholder-for="u22380-4-bw_content"><!-- placeholder node --></span>
      <div class="browser_width grpelem" id="u25604-bw">
       <span class="size_browser_width placeholder" data-placeholder-for="u25604_content"><!-- placeholder node --></span>
      </div>
      <div class="browser_width grpelem" id="u25614-bw">
       <span class="size_browser_width placeholder" data-placeholder-for="u25614_content"><!-- placeholder node --></span>
      </div>
      <div class="browser_width grpelem" id="u25624-bw">
       <span class="size_browser_width placeholder" data-placeholder-for="u25624_content"><!-- placeholder node --></span>
      </div>
      <div class="browser_width grpelem" id="u25634-bw">
       <span class="size_browser_width placeholder" data-placeholder-for="u25634_content"><!-- placeholder node --></span>
      </div>
      <div class="browser_width grpelem" id="u25644-bw">
       <span class="size_browser_width placeholder" data-placeholder-for="u25644_content"><!-- placeholder node --></span>
      </div>
      <div class="browser_width grpelem" id="u25654-bw">
       <span class="size_browser_width placeholder" data-placeholder-for="u25654_content"><!-- placeholder node --></span>
      </div>
      <div class="browser_width grpelem" id="u25659-bw">
       <span class="size_browser_width placeholder" data-placeholder-for="u25659_content"><!-- placeholder node --></span>
      </div>
     </div>
    </div>
    <div class="verticalspacer" data-offset-top="5167" data-content-above-spacer="5166" data-content-below-spacer="153" data-sizePolicy="fixed" data-pintopage="page_fixedLeft"></div>
    <span class="clearfix grpelem placeholder" data-placeholder-for="pu19517_content"><!-- placeholder node --></span>
   </div>
  </div>
  <div class="breakpoint" id="bp_800" data-min-width="601" data-max-width="800"><!-- responsive breakpoint node -->
   <div class="clearfix borderbox temp_no_id" data-orig-id="page"><!-- group -->
    <div class="clearfix grpelem temp_no_id" data-orig-id="pu94"><!-- group -->
     <span class="browser_width placeholder" data-placeholder-for="u94-bw_content"><!-- placeholder node --></span>
     <span class="nonblock nontext clip_frame placeholder" data-placeholder-for="u95_content"><!-- placeholder node --></span>
     <span class="browser_width placeholder" data-placeholder-for="u137-bw_content"><!-- placeholder node --></span>
     <span class="clearfix placeholder" data-placeholder-for="u138-4_content"><!-- placeholder node --></span>
     <span class="nonblock nontext clip_frame placeholder" data-placeholder-for="u139_content"><!-- placeholder node --></span>
     <span class="nonblock nontext clip_frame placeholder" data-placeholder-for="u141_content"><!-- placeholder node --></span>
     <span class="nonblock nontext clip_frame placeholder" data-placeholder-for="u143_content"><!-- placeholder node --></span>
     <div class="PamphletWidget clearfix" id="pamphletu753"><!-- none box -->
      <div class="popup_anchor" id="u766popup">
       <div class="ContainerGroup clearfix" id="u766" data-sizePolicy="fixed" data-pintopage="page_fixedLeft"><!-- stack box -->
        <div class="Container invi clearfix grpelem" id="u767" data-sizePolicy="fixed" data-pintopage="page_fixedLeft"><!-- group -->
         <nav class="MenuBar clearfix grpelem" id="menuu768" data-sizePolicy="fixed" data-pintopage="page_fixedLeft"><!-- vertical box -->
          <div class="MenuItemContainer clearfix colelem" id="u790"><!-- horizontal box -->
           <a class="nonblock nontext MenuItem MenuItemWithSubMenu clearfix grpelem" id="u791" href="index.html" data-href="page:U93"><!-- horizontal box --><div class="MenuItemLabel clearfix grpelem" id="u793-4" data-IBE-flags="txtStyleSrc" data-sizePolicy="fixed" data-pintopage="page_fixedLeft"><!-- content --><p class="shared_content" data-content-guid="u793-4_0_content">Início</p></div></a>
          </div>
          <div class="MenuItemContainer clearfix colelem" id="u783"><!-- horizontal box -->
           <a class="nonblock nontext MenuItem MenuItemWithSubMenu clearfix grpelem" id="u786" href="sobre-a-banda.html" data-href="page:U433"><!-- horizontal box --><div class="MenuItemLabel clearfix grpelem" id="u787-4" data-IBE-flags="txtStyleSrc" data-sizePolicy="fixed" data-pintopage="page_fixedLeft"><!-- content --><p class="shared_content" data-content-guid="u787-4_0_content">Sobre Nós</p></div></a>
          </div>
          <div class="MenuItemContainer clearfix colelem" id="u776"><!-- horizontal box -->
           <a class="nonblock nontext MenuItem MenuItemWithSubMenu MuseMenuActive clearfix grpelem" id="u779" href="videos.html" data-href="page:U466"><!-- horizontal box --><div class="MenuItemLabel clearfix grpelem" id="u782-4" data-IBE-flags="txtStyleSrc" data-sizePolicy="fixed" data-pintopage="page_fixedLeft"><!-- content --><p class="shared_content" data-content-guid="u782-4_0_content">Vídeos</p></div></a>
          </div>
          <div class="MenuItemContainer clearfix colelem" id="u769"><!-- horizontal box -->
           <a class="nonblock nontext MenuItem MenuItemWithSubMenu clearfix grpelem" id="u772" href="imagens.html" data-href="page:U499"><!-- horizontal box --><div class="MenuItemLabel clearfix grpelem" id="u775-4" data-IBE-flags="txtStyleSrc" data-sizePolicy="fixed" data-pintopage="page_fixedLeft"><!-- content --><p class="shared_content" data-content-guid="u775-4_0_content">Imagens</p></div></a>
          </div>
          <div class="MenuItemContainer clearfix colelem" id="u22034"><!-- horizontal box -->
           <a class="nonblock nontext MenuItem MenuItemWithSubMenu clearfix grpelem" id="u22037" href="repertorio.html" data-href="page:U20934"><!-- horizontal box --><div class="MenuItemLabel clearfix grpelem" id="u22039-4" data-IBE-flags="txtStyleSrc" data-sizePolicy="fixed" data-pintopage="page_fixedLeft"><!-- content --><p class="shared_content" data-content-guid="u22039-4_0_content">Repertório</p></div></a>
          </div>
          <div class="MenuItemContainer clearfix colelem" id="u797"><!-- horizontal box -->
           <a class="nonblock nontext MenuItem MenuItemWithSubMenu clearfix grpelem" id="u798" href="contato.html" data-href="page:U532"><!-- horizontal box --><div class="MenuItemLabel clearfix grpelem" id="u800-4" data-IBE-flags="txtStyleSrc" data-sizePolicy="fixed" data-pintopage="page_fixedLeft"><!-- content --><p class="shared_content" data-content-guid="u800-4_0_content">Contato</p></div></a>
          </div>
         </nav>
        </div>
       </div>
      </div>
      <div class="ThumbGroup clearfix grpelem" id="u760" data-sizePolicy="fixed" data-pintopage="page_fixedLeft"><!-- none box -->
       <div class="popup_anchor" id="u761popup">
        <div class="Thumb popup_element clearfix" id="u761" data-sizePolicy="fixed" data-pintopage="page_fixedLeft"><!-- group -->
         <div class="clearfix grpelem shared_content" id="u762" data-content-guid="u762_content"><!-- column -->
          <div class="colelem" id="u764" data-sizePolicy="fixed" data-pintopage="page_fixedLeft"><!-- simple frame --></div>
          <div class="colelem" id="u763" data-sizePolicy="fixed" data-pintopage="page_fixedLeft"><!-- simple frame --></div>
          <div class="colelem" id="u765" data-sizePolicy="fixed" data-pintopage="page_fixedLeft"><!-- simple frame --></div>
         </div>
        </div>
       </div>
      </div>
     </div>
    </div>
    <span class="clearfix grpelem placeholder" data-placeholder-for="pu22290_content"><!-- placeholder node --></span>
    <div class="verticalspacer" data-offset-top="3664" data-content-above-spacer="3663" data-content-below-spacer="157" data-sizePolicy="fixed" data-pintopage="page_fixedLeft"></div>
    <span class="clearfix grpelem placeholder" data-placeholder-for="pu19517_content"><!-- placeholder node --></span>
   </div>
  </div>
  <div class="breakpoint" id="bp_600" data-min-width="401" data-max-width="600"><!-- responsive breakpoint node -->
   <div class="clearfix borderbox temp_no_id" data-orig-id="page"><!-- group -->
    <div class="clearfix grpelem temp_no_id" data-orig-id="pu94"><!-- group -->
     <span class="browser_width placeholder" data-placeholder-for="u94-bw_content"><!-- placeholder node --></span>
     <a class="nonblock nontext clip_frame temp_no_id shared_content" href="index.html" data-href="page:U93" data-orig-id="u95" data-content-guid="u95_content1"><!-- image --><img class="block temp_no_id temp_no_img_src" data-orig-src="images/logo-banda-rock-sao-paulo-bar-pub-send-rock.png?crc=3841909168" alt="Logo da banda de rock Send Rock, que atua em bares e pubs na cidade de São Paulo, São Bernardo do Campo, Santo André, São Caetano e todo o ABC." title="Logo banda Send Rock" width="210" height="43" data-orig-id="u95_img" src="images/blank.gif?crc=4208392903"/></a>
     <span class="browser_width placeholder" data-placeholder-for="u137-bw_content"><!-- placeholder node --></span>
     <span class="clearfix placeholder" data-placeholder-for="u138-4_content"><!-- placeholder node --></span>
     <span class="nonblock nontext clip_frame placeholder" data-placeholder-for="u139_content"><!-- placeholder node --></span>
     <span class="nonblock nontext clip_frame placeholder" data-placeholder-for="u141_content"><!-- placeholder node --></span>
     <span class="nonblock nontext clip_frame placeholder" data-placeholder-for="u143_content"><!-- placeholder node --></span>
     <div class="PamphletWidget clearfix temp_no_id" data-orig-id="pamphletu753"><!-- none box -->
      <div class="popup_anchor temp_no_id" data-orig-id="u766popup">
       <div class="ContainerGroup clearfix temp_no_id" data-sizePolicy="fixed" data-pintopage="page_fixedLeft" data-orig-id="u766"><!-- stack box -->
        <div class="Container invi clearfix grpelem temp_no_id" data-sizePolicy="fixed" data-pintopage="page_fixedLeft" data-orig-id="u767"><!-- group -->
         <nav class="MenuBar clearfix grpelem temp_no_id" data-sizePolicy="fixed" data-pintopage="page_fixedLeft" data-orig-id="menuu768"><!-- vertical box -->
          <div class="MenuItemContainer clearfix colelem temp_no_id" data-orig-id="u790"><!-- horizontal box -->
           <a class="nonblock nontext MenuItem MenuItemWithSubMenu clearfix grpelem temp_no_id" href="index.html" data-href="page:U93" data-orig-id="u791"><!-- horizontal box --><div class="MenuItemLabel clearfix grpelem temp_no_id" data-IBE-flags="txtStyleSrc" data-sizePolicy="fixed" data-pintopage="page_fixedLeft" data-orig-id="u793-4"><!-- content --><span class="placeholder" data-placeholder-for="u793-4_0_content"><!-- placeholder node --></span></div></a>
          </div>
          <div class="MenuItemContainer clearfix colelem temp_no_id" data-orig-id="u783"><!-- horizontal box -->
           <a class="nonblock nontext MenuItem MenuItemWithSubMenu clearfix grpelem temp_no_id" href="sobre-a-banda.html" data-href="page:U433" data-orig-id="u786"><!-- horizontal box --><div class="MenuItemLabel clearfix grpelem temp_no_id" data-IBE-flags="txtStyleSrc" data-sizePolicy="fixed" data-pintopage="page_fixedLeft" data-orig-id="u787-4"><!-- content --><span class="placeholder" data-placeholder-for="u787-4_0_content"><!-- placeholder node --></span></div></a>
          </div>
          <div class="MenuItemContainer clearfix colelem temp_no_id" data-orig-id="u776"><!-- horizontal box -->
           <a class="nonblock nontext MenuItem MenuItemWithSubMenu MuseMenuActive clearfix grpelem temp_no_id" href="videos.html" data-href="page:U466" data-orig-id="u779"><!-- horizontal box --><div class="MenuItemLabel clearfix grpelem temp_no_id" data-IBE-flags="txtStyleSrc" data-sizePolicy="fixed" data-pintopage="page_fixedLeft" data-orig-id="u782-4"><!-- content --><span class="placeholder" data-placeholder-for="u782-4_0_content"><!-- placeholder node --></span></div></a>
          </div>
          <div class="MenuItemContainer clearfix colelem temp_no_id" data-orig-id="u769"><!-- horizontal box -->
           <a class="nonblock nontext MenuItem MenuItemWithSubMenu clearfix grpelem temp_no_id" href="imagens.html" data-href="page:U499" data-orig-id="u772"><!-- horizontal box --><div class="MenuItemLabel clearfix grpelem temp_no_id" data-IBE-flags="txtStyleSrc" data-sizePolicy="fixed" data-pintopage="page_fixedLeft" data-orig-id="u775-4"><!-- content --><span class="placeholder" data-placeholder-for="u775-4_0_content"><!-- placeholder node --></span></div></a>
          </div>
          <div class="MenuItemContainer clearfix colelem temp_no_id" data-orig-id="u22034"><!-- horizontal box -->
           <a class="nonblock nontext MenuItem MenuItemWithSubMenu clearfix grpelem temp_no_id" href="repertorio.html" data-href="page:U20934" data-orig-id="u22037"><!-- horizontal box --><div class="MenuItemLabel clearfix grpelem temp_no_id" data-IBE-flags="txtStyleSrc" data-sizePolicy="fixed" data-pintopage="page_fixedLeft" data-orig-id="u22039-4"><!-- content --><span class="placeholder" data-placeholder-for="u22039-4_0_content"><!-- placeholder node --></span></div></a>
          </div>
          <div class="MenuItemContainer clearfix colelem temp_no_id" data-orig-id="u797"><!-- horizontal box -->
           <a class="nonblock nontext MenuItem MenuItemWithSubMenu clearfix grpelem temp_no_id" href="contato.html" data-href="page:U532" data-orig-id="u798"><!-- horizontal box --><div class="MenuItemLabel clearfix grpelem temp_no_id" data-IBE-flags="txtStyleSrc" data-sizePolicy="fixed" data-pintopage="page_fixedLeft" data-orig-id="u800-4"><!-- content --><span class="placeholder" data-placeholder-for="u800-4_0_content"><!-- placeholder node --></span></div></a>
          </div>
         </nav>
        </div>
       </div>
      </div>
      <div class="ThumbGroup clearfix grpelem temp_no_id" data-sizePolicy="fixed" data-pintopage="page_fixedLeft" data-orig-id="u760"><!-- none box -->
       <div class="popup_anchor temp_no_id" data-orig-id="u761popup">
        <div class="Thumb popup_element clearfix temp_no_id" data-sizePolicy="fixed" data-pintopage="page_fixedLeft" data-orig-id="u761"><!-- group -->
         <span class="clearfix grpelem placeholder" data-placeholder-for="u762_content"><!-- placeholder node --></span>
        </div>
       </div>
      </div>
     </div>
    </div>
    <span class="clearfix grpelem placeholder" data-placeholder-for="pu22290_content"><!-- placeholder node --></span>
    <div class="verticalspacer" data-offset-top="2803" data-content-above-spacer="2802" data-content-below-spacer="161" data-sizePolicy="fixed" data-pintopage="page_fixedLeft"></div>
    <div class="clearfix grpelem temp_no_id" data-orig-id="pu19517"><!-- group -->
     <span class="browser_width grpelem placeholder" data-placeholder-for="u19517-bw_content"><!-- placeholder node --></span>
     <span class="browser_width grpelem placeholder" data-placeholder-for="u24425-bw_content"><!-- placeholder node --></span>
     <div class="browser_width grpelem temp_no_id" data-orig-id="u554-bw">
      <div class="temp_no_id" data-orig-id="u554"><!-- group -->
       <div class="clearfix temp_no_id" data-orig-id="u554_align_to_page">
        <span class="clip_frame grpelem placeholder" data-placeholder-for="u1514_content"><!-- placeholder node --></span>
        <div class="clearfix grpelem" id="ppu1516-4"><!-- column -->
         <div class="clearfix colelem" id="pu1516-4"><!-- group -->
          <span class="clearfix grpelem placeholder" data-placeholder-for="u1516-4_content"><!-- placeholder node --></span>
          <span class="clip_frame grpelem placeholder" data-placeholder-for="u1512_content"><!-- placeholder node --></span>
          <span class="clearfix grpelem placeholder" data-placeholder-for="u1517-6_content"><!-- placeholder node --></span>
         </div>
         <span class="clearfix colelem placeholder" data-placeholder-for="u1518-6_content"><!-- placeholder node --></span>
        </div>
       </div>
      </div>
     </div>
     <span class="browser_width grpelem placeholder" data-placeholder-for="u12049-bw_content"><!-- placeholder node --></span>
    </div>
   </div>
  </div>
  <div class="breakpoint" id="bp_400" data-max-width="400"><!-- responsive breakpoint node -->
   <div class="clearfix borderbox temp_no_id" data-orig-id="page"><!-- group -->
    <div class="clearfix grpelem temp_no_id" data-orig-id="pu94"><!-- group -->
     <span class="browser_width placeholder" data-placeholder-for="u94-bw_content"><!-- placeholder node --></span>
     <span class="nonblock nontext clip_frame placeholder" data-placeholder-for="u95_content1"><!-- placeholder node --></span>
     <span class="browser_width placeholder" data-placeholder-for="u137-bw_content"><!-- placeholder node --></span>
     <span class="clearfix placeholder" data-placeholder-for="u138-4_content"><!-- placeholder node --></span>
     <span class="nonblock nontext clip_frame placeholder" data-placeholder-for="u139_content"><!-- placeholder node --></span>
     <span class="nonblock nontext clip_frame placeholder" data-placeholder-for="u141_content"><!-- placeholder node --></span>
     <span class="nonblock nontext clip_frame placeholder" data-placeholder-for="u143_content"><!-- placeholder node --></span>
     <div class="PamphletWidget clearfix temp_no_id" data-orig-id="pamphletu753"><!-- none box -->
      <div class="popup_anchor temp_no_id" data-orig-id="u766popup">
       <div class="ContainerGroup clearfix temp_no_id" data-sizePolicy="fixed" data-pintopage="page_fixedLeft" data-orig-id="u766"><!-- stack box -->
        <div class="Container invi clearfix grpelem temp_no_id" data-sizePolicy="fixed" data-pintopage="page_fixedLeft" data-orig-id="u767"><!-- group -->
         <nav class="MenuBar clearfix grpelem temp_no_id" data-sizePolicy="fixed" data-pintopage="page_fixedLeft" data-orig-id="menuu768"><!-- vertical box -->
          <div class="MenuItemContainer clearfix colelem temp_no_id" data-orig-id="u790"><!-- horizontal box -->
           <a class="nonblock nontext MenuItem MenuItemWithSubMenu clearfix grpelem temp_no_id" href="index.html" data-href="page:U93" data-orig-id="u791"><!-- horizontal box --><div class="MenuItemLabel clearfix grpelem temp_no_id" data-IBE-flags="txtStyleSrc" data-sizePolicy="fixed" data-pintopage="page_fixedLeft" data-orig-id="u793-4"><!-- content --><span class="placeholder" data-placeholder-for="u793-4_0_content"><!-- placeholder node --></span></div></a>
          </div>
          <div class="MenuItemContainer clearfix colelem temp_no_id" data-orig-id="u783"><!-- horizontal box -->
           <a class="nonblock nontext MenuItem MenuItemWithSubMenu clearfix grpelem temp_no_id" href="sobre-a-banda.html" data-href="page:U433" data-orig-id="u786"><!-- horizontal box --><div class="MenuItemLabel clearfix grpelem temp_no_id" data-IBE-flags="txtStyleSrc" data-sizePolicy="fixed" data-pintopage="page_fixedLeft" data-orig-id="u787-4"><!-- content --><span class="placeholder" data-placeholder-for="u787-4_0_content"><!-- placeholder node --></span></div></a>
          </div>
          <div class="MenuItemContainer clearfix colelem temp_no_id" data-orig-id="u776"><!-- horizontal box -->
           <a class="nonblock nontext MenuItem MenuItemWithSubMenu MuseMenuActive clearfix grpelem temp_no_id" href="videos.html" data-href="page:U466" data-orig-id="u779"><!-- horizontal box --><div class="MenuItemLabel clearfix grpelem temp_no_id" data-IBE-flags="txtStyleSrc" data-sizePolicy="fixed" data-pintopage="page_fixedLeft" data-orig-id="u782-4"><!-- content --><span class="placeholder" data-placeholder-for="u782-4_0_content"><!-- placeholder node --></span></div></a>
          </div>
          <div class="MenuItemContainer clearfix colelem temp_no_id" data-orig-id="u769"><!-- horizontal box -->
           <a class="nonblock nontext MenuItem MenuItemWithSubMenu clearfix grpelem temp_no_id" href="imagens.html" data-href="page:U499" data-orig-id="u772"><!-- horizontal box --><div class="MenuItemLabel clearfix grpelem temp_no_id" data-IBE-flags="txtStyleSrc" data-sizePolicy="fixed" data-pintopage="page_fixedLeft" data-orig-id="u775-4"><!-- content --><span class="placeholder" data-placeholder-for="u775-4_0_content"><!-- placeholder node --></span></div></a>
          </div>
          <div class="MenuItemContainer clearfix colelem temp_no_id" data-orig-id="u22034"><!-- horizontal box -->
           <a class="nonblock nontext MenuItem MenuItemWithSubMenu clearfix grpelem temp_no_id" href="repertorio.html" data-href="page:U20934" data-orig-id="u22037"><!-- horizontal box --><div class="MenuItemLabel clearfix grpelem temp_no_id" data-IBE-flags="txtStyleSrc" data-sizePolicy="fixed" data-pintopage="page_fixedLeft" data-orig-id="u22039-4"><!-- content --><span class="placeholder" data-placeholder-for="u22039-4_0_content"><!-- placeholder node --></span></div></a>
          </div>
          <div class="MenuItemContainer clearfix colelem temp_no_id" data-orig-id="u797"><!-- horizontal box -->
           <a class="nonblock nontext MenuItem MenuItemWithSubMenu clearfix grpelem temp_no_id" href="contato.html" data-href="page:U532" data-orig-id="u798"><!-- horizontal box --><div class="MenuItemLabel clearfix grpelem temp_no_id" data-IBE-flags="txtStyleSrc" data-sizePolicy="fixed" data-pintopage="page_fixedLeft" data-orig-id="u800-4"><!-- content --><span class="placeholder" data-placeholder-for="u800-4_0_content"><!-- placeholder node --></span></div></a>
          </div>
         </nav>
        </div>
       </div>
      </div>
      <div class="ThumbGroup clearfix grpelem temp_no_id" data-sizePolicy="fixed" data-pintopage="page_fixedLeft" data-orig-id="u760"><!-- none box -->
       <div class="popup_anchor temp_no_id" data-orig-id="u761popup">
        <div class="Thumb popup_element clearfix temp_no_id" data-sizePolicy="fixed" data-pintopage="page_fixedLeft" data-orig-id="u761"><!-- group -->
         <span class="clearfix grpelem placeholder" data-placeholder-for="u762_content"><!-- placeholder node --></span>
        </div>
       </div>
      </div>
     </div>
    </div>
    <span class="clearfix grpelem placeholder" data-placeholder-for="pu22290_content"><!-- placeholder node --></span>
    <div class="verticalspacer" data-offset-top="2891" data-content-above-spacer="2890" data-content-below-spacer="193" data-sizePolicy="fixed" data-pintopage="page_fixedLeft"></div>
    <div class="clearfix grpelem temp_no_id" data-orig-id="pu19517"><!-- group -->
     <span class="browser_width grpelem placeholder" data-placeholder-for="u19517-bw_content"><!-- placeholder node --></span>
     <span class="browser_width grpelem placeholder" data-placeholder-for="u24425-bw_content"><!-- placeholder node --></span>
     <div class="browser_width grpelem temp_no_id" data-orig-id="u554-bw">
      <div class="temp_no_id" data-orig-id="u554"><!-- column -->
       <div class="clearfix temp_no_id" data-orig-id="u554_align_to_page">
        <div class="clearfix colelem temp_no_id" data-orig-id="pu1514"><!-- group -->
         <span class="clip_frame grpelem placeholder" data-placeholder-for="u1514_content"><!-- placeholder node --></span>
         <span class="clearfix grpelem placeholder" data-placeholder-for="u1516-4_content"><!-- placeholder node --></span>
        </div>
        <div class="clearfix colelem" id="pu1512"><!-- group -->
         <span class="clip_frame grpelem placeholder" data-placeholder-for="u1512_content"><!-- placeholder node --></span>
         <span class="clearfix grpelem placeholder" data-placeholder-for="u1517-6_content"><!-- placeholder node --></span>
        </div>
        <span class="clearfix colelem placeholder" data-placeholder-for="u1518-6_content"><!-- placeholder node --></span>
       </div>
      </div>
     </div>
     <span class="browser_width grpelem placeholder" data-placeholder-for="u12049-bw_content"><!-- placeholder node --></span>
    </div>
   </div>
  </div>
  <!-- JS includes -->
  <script type="text/javascript">
   if (document.location.protocol != 'https:') document.write('\x3Cscript src="http://musecdn2.businesscatalyst.com/scripts/4.0/jquery-1.8.3.min.js" type="text/javascript">\x3C/script>');
</script>
  <script type="text/javascript">
   window.jQuery || document.write('\x3Cscript src="scripts/jquery-1.8.3.min.js?crc=209076791" type="text/javascript">\x3C/script>');
</script>
  <!-- Other scripts -->
  <script type="text/javascript">
   // Decide whether to suppress missing file error or not based on preference setting
var suppressMissingFileError = false
</script>
  <script type="text/javascript">
   window.Muse.assets.check=function(c){if(!window.Muse.assets.checked){window.Muse.assets.checked=!0;var b={},d=function(a,b){if(window.getComputedStyle){var c=window.getComputedStyle(a,null);return c&&c.getPropertyValue(b)||c&&c[b]||""}if(document.documentElement.currentStyle)return(c=a.currentStyle)&&c[b]||a.style&&a.style[b]||"";return""},a=function(a){if(a.match(/^rgb/))return a=a.replace(/\s+/g,"").match(/([\d\,]+)/gi)[0].split(","),(parseInt(a[0])<<16)+(parseInt(a[1])<<8)+parseInt(a[2]);if(a.match(/^\#/))return parseInt(a.substr(1),
16);return 0},f=function(f){for(var g=document.getElementsByTagName("link"),j=0;j<g.length;j++)if("text/css"==g[j].type){var l=(g[j].href||"").match(/\/?css\/([\w\-]+\.css)\?crc=(\d+)/);if(!l||!l[1]||!l[2])break;b[l[1]]=l[2]}g=document.createElement("div");g.className="version";g.style.cssText="display:none; width:1px; height:1px;";document.getElementsByTagName("body")[0].appendChild(g);for(j=0;j<Muse.assets.required.length;){var l=Muse.assets.required[j],k=l.match(/([\w\-\.]+)\.(\w+)$/),i=k&&k[1]?
k[1]:null,k=k&&k[2]?k[2]:null;switch(k.toLowerCase()){case "css":i=i.replace(/\W/gi,"_").replace(/^([^a-z])/gi,"_$1");g.className+=" "+i;i=a(d(g,"color"));k=a(d(g,"backgroundColor"));i!=0||k!=0?(Muse.assets.required.splice(j,1),"undefined"!=typeof b[l]&&(i!=b[l]>>>24||k!=(b[l]&16777215))&&Muse.assets.outOfDate.push(l)):j++;g.className="version";break;case "js":j++;break;default:throw Error("Unsupported file type: "+k);}}c?c().jquery!="1.8.3"&&Muse.assets.outOfDate.push("jquery-1.8.3.min.js"):Muse.assets.required.push("jquery-1.8.3.min.js");
g.parentNode.removeChild(g);if(Muse.assets.outOfDate.length||Muse.assets.required.length)g="Alguns arquivos no servidor podem estar ausentes ou incorretos. Limpe o cache do navegador e tente novamente. Se o problema persistir, entre em contato com o autor do site.",f&&Muse.assets.outOfDate.length&&(g+="\nOut of date: "+Muse.assets.outOfDate.join(",")),f&&Muse.assets.required.length&&(g+="\nMissing: "+Muse.assets.required.join(",")),suppressMissingFileError?(g+="\nUse SuppressMissingFileError key in AppPrefs.xml to show missing file error pop up.",console.log(g)):alert(g)};location&&location.search&&location.search.match&&location.search.match(/muse_debug/gi)?
setTimeout(function(){f(!0)},5E3):f()}};
var muse_init=function(){require.config({baseUrl:""});require(["jquery","museutils","whatinput","jquery.musemenu","jquery.watch","webpro","musewpslideshow","jquery.museoverlay","touchswipe","jquery.museresponsive"],function(c){var $ = c;$(document).ready(function(){try{
window.Muse.assets.check($);/* body */
Muse.Utils.transformMarkupToFixBrowserProblemsPreInit();/* body */
Muse.Utils.prepHyperlinks(true);/* body */
Muse.Utils.resizeHeight('.browser_width');/* resize height */
Muse.Utils.requestAnimationFrame(function() { $('body').addClass('initialized'); });/* mark body as initialized */
Muse.Utils.makeButtonsVisibleAfterSettingMinWidth();/* body */
Muse.Utils.initWidget('.MenuBar', ['#bp_infinity', '#bp_1000', '#bp_800', '#bp_600', '#bp_400'], function(elem) { return $(elem).museMenu(); });/* unifiedNavBar */
Muse.Utils.initWidget('#pamphletu753', ['#bp_800', '#bp_600', '#bp_400'], function(elem) { return new WebPro.Widget.ContentSlideShow(elem, {contentLayout_runtime:'stack',event:'click',deactivationEvent:'mouseout_click',autoPlay:false,displayInterval:3000,transitionStyle:'fading',transitionDuration:500,hideAllContentsFirst:true,triggersOnTop:true,shuffle:false,enableSwipe:true,resumeAutoplay:true,resumeAutoplayInterval:3000,playOnce:false,autoActivate_runtime:false,isResponsive:false}); });/* #pamphletu753 */
Muse.Utils.fullPage('#page');/* 100% height page */
$( '.breakpoint' ).registerBreakpoint();/* Register breakpoints */
Muse.Utils.transformMarkupToFixBrowserProblems();/* body */
}catch(b){if(b&&"function"==typeof b.notify?b.notify():Muse.Assert.fail("Error calling selector function: "+b),false)throw b;}})})};

</script>
  <!-- RequireJS script -->
  <script src="scripts/require.js?crc=7928878" type="text/javascript" async data-main="scripts/museconfig.js?crc=310584261" onload="if (requirejs) requirejs.onError = function(requireType, requireModule) { if (requireType && requireType.toString && requireType.toString().indexOf && 0 <= requireType.toString().indexOf('#scripterror')) window.Muse.assets.check(); }" onerror="window.Muse.assets.check();"></script>
  
  <!--HTML Widget code-->
  
        <script>
            /*!
             * animsition v4.0.2
             * A simple and easy jQuery plugin for CSS animated page transitions.
             * http://blivesta.github.io/animsition
             * License : MIT
             * Author : blivesta (http://blivesta.com/)
             */
            !function(t){"use strict";"function"==typeof define&&define.amd?define(["jquery"],t):"object"==typeof exports?module.exports=t(require("jquery")):t(jQuery)}(function(t){"use strict";var n="animsition",i={init:function(a){a=t.extend({inClass:"fade-in",outClass:"fade-out",inDuration:1500,outDuration:800,linkElement:".animsition-link",loading:!0,loadingParentElement:"body",loadingClass:"animsition-loading",loadingInner:"",timeout:!1,timeoutCountdown:5e3,onLoadEvent:!0,browser:["animation-duration","-webkit-animation-duration"],overlay:!1,overlayClass:"animsition-overlay-slide",overlayParentElement:"body",transition:function(t){window.location.href=t}},a),i.settings={timer:!1,data:{inClass:"animsition-in-class",inDuration:"animsition-in-duration",outClass:"animsition-out-class",outDuration:"animsition-out-duration",overlay:"animsition-overlay"},events:{inStart:"animsition.inStart",inEnd:"animsition.inEnd",outStart:"animsition.outStart",outEnd:"animsition.outEnd"}};var o=i.supportCheck.call(this,a);if(!o&&a.browser.length>0&&(!o||!this.length))return"console"in window||(window.console={},window.console.log=function(t){return t}),this.length||console.log("Animsition: Element does not exist on page."),o||console.log("Animsition: Does not support this browser."),i.destroy.call(this);var e=i.optionCheck.call(this,a);return e&&t("."+a.overlayClass).length<=0&&i.addOverlay.call(this,a),a.loading&&t("."+a.loadingClass).length<=0&&i.addLoading.call(this,a),this.each(function(){var o=this,e=t(this),s=t(window),r=t(document),l=e.data(n);l||(a=t.extend({},a),e.data(n,{options:a}),a.timeout&&i.addTimer.call(o),a.onLoadEvent&&s.on("load."+n,function(){i.settings.timer&&clearTimeout(i.settings.timer),i["in"].call(o)}),s.on("pageshow."+n,function(t){t.originalEvent.persisted&&i["in"].call(o)}),s.on("unload."+n,function(){}),r.on("click."+n,a.linkElement,function(n){n.preventDefault();var a=t(this),e=a.attr("href");2===n.which||n.metaKey||n.shiftKey||-1!==navigator.platform.toUpperCase().indexOf("WIN")&&n.ctrlKey?window.open(e,"_blank"):i.out.call(o,a,e)}))})},addOverlay:function(n){t(n.overlayParentElement).prepend('<div class="'+n.overlayClass+'"></div>')},addLoading:function(n){t(n.loadingParentElement).append('<div class="'+n.loadingClass+'">'+n.loadingInner+"</div>")},removeLoading:function(){var i=t(this),a=i.data(n).options,o=t(a.loadingParentElement).children("."+a.loadingClass);o.fadeOut().remove()},addTimer:function(){var a=this,o=t(this),e=o.data(n).options;i.settings.timer=setTimeout(function(){i["in"].call(a),t(window).off("load."+n)},e.timeoutCountdown)},supportCheck:function(n){var i=t(this),a=n.browser,o=a.length,e=!1;0===o&&(e=!0);for(var s=0;o>s;s++)if("string"==typeof i.css(a[s])){e=!0;break}return e},optionCheck:function(n){var a,o=t(this);return a=n.overlay||o.data(i.settings.data.overlay)?!0:!1},animationCheck:function(i,a,o){var e=t(this),s=e.data(n).options,r=typeof i,l=!a&&"number"===r,d=a&&"string"===r&&i.length>0;return l||d?i=i:a&&o?i=s.inClass:!a&&o?i=s.inDuration:a&&!o?i=s.outClass:a||o||(i=s.outDuration),i},"in":function(){var a=this,o=t(this),e=o.data(n).options,s=o.data(i.settings.data.inDuration),r=o.data(i.settings.data.inClass),l=i.animationCheck.call(a,s,!1,!0),d=i.animationCheck.call(a,r,!0,!0),u=i.optionCheck.call(a,e),c=o.data(n).outClass;e.loading&&i.removeLoading.call(a),c&&o.removeClass(c),u?i.inOverlay.call(a,d,l):i.inDefault.call(a,d,l)},inDefault:function(n,a){var o=t(this);o.css({"animation-duration":a+"ms"}).addClass(n).trigger(i.settings.events.inStart).animateCallback(function(){o.removeClass(n).css({opacity:1}).trigger(i.settings.events.inEnd)})},inOverlay:function(a,o){var e=t(this),s=e.data(n).options;e.css({opacity:1}).trigger(i.settings.events.inStart),t(s.overlayParentElement).children("."+s.overlayClass).css({"animation-duration":o+"ms"}).addClass(a).animateCallback(function(){e.trigger(i.settings.events.inEnd)})},out:function(a,o){var e=this,s=t(this),r=s.data(n).options,l=a.data(i.settings.data.outClass),d=s.data(i.settings.data.outClass),u=a.data(i.settings.data.outDuration),c=s.data(i.settings.data.outDuration),m=l?l:d,g=u?u:c,f=i.animationCheck.call(e,m,!0,!1),v=i.animationCheck.call(e,g,!1,!1),h=i.optionCheck.call(e,r);s.data(n).outClass=f,h?i.outOverlay.call(e,f,v,o):i.outDefault.call(e,f,v,o)},outDefault:function(a,o,e){var s=t(this),r=s.data(n).options;s.css({"animation-duration":o+1+"ms"}).addClass(a).trigger(i.settings.events.outStart).animateCallback(function(){s.trigger(i.settings.events.outEnd),r.transition(e)})},outOverlay:function(a,o,e){var s=this,r=t(this),l=r.data(n).options,d=r.data(i.settings.data.inClass),u=i.animationCheck.call(s,d,!0,!0);t(l.overlayParentElement).children("."+l.overlayClass).css({"animation-duration":o+1+"ms"}).removeClass(u).addClass(a).trigger(i.settings.events.outStart).animateCallback(function(){r.trigger(i.settings.events.outEnd),l.transition(e)})},destroy:function(){return this.each(function(){var i=t(this);t(window).off("."+n),i.css({opacity:1}).removeData(n)})}};t.fn.animateCallback=function(n){var i="animationend webkitAnimationEnd";return this.each(function(){var a=t(this);a.on(i,function(){return a.off(i),n.call(this)})})},t.fn.animsition=function(a){return i[a]?i[a].apply(this,Array.prototype.slice.call(arguments,1)):"object"!=typeof a&&a?void t.error("Method "+a+" does not exist on jQuery."+n):i.init.apply(this,arguments)}});
            
            $(document).ready(function() {
              $("body").animsition({
                inClass: 'fade-in',
                outClass: 'fade-out',
                inDuration: 700,
                outDuration: 500,
                linkElement: 'a:not([target="_blank"]):not([href^="#"])'
              });
            });
            $('body').on('animsition.outEnd', function(){
                $("body").css("opacity", "0");
            });
        </script>
    
   </body>
</html>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Faltou colocar o código CSS referente aos vídeos, mas ainda assim eu recortei o primeiro iframe e testei aqui. No entanto, não percebi nenhum erro.

Por isso, tenho receio que é o simulador dos navegadores ou algo relacionado ao seu computador. Seria legal que você abrisse a página em um dispositivo real, como um celular.

 

Além do mais, se o problema persistir, é importante que você abra uma pergunta no Stack Overflow. Assim, talvez você encontre a resposta mais rápido do que aqui.

 

Ps: Também, não esqueça de me enviar o link do site, quando tiver pronto. Quero ver os outros vídeos! =D

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Danilo Pupin Infelizmente o código que postou fica inviável de decifrar, além de muitos elementos e regras CSS. 

 

Provável que o seu problema é conflito no CSS em alguma regra.

 

Não sei como você está fazendo a responsividade, mas para ter um iframe responsivo, é necessário que você crie um elemento "conteiner" para ele.

 

Exemplo:

 

<div class="videoWrapper">
  <iframe width="560" 
          height="315"   
          src="https://www.youtube.com/embed/VaonOzUTOu8?rel=0" 
          frameborder="0" 
          allow="autoplay; encrypted-media" 
          allowfullscreen>
    </iframe>
</div>

CSS:

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  

 

Exemplo Online: https://jsfiddle.net/dgge55m9/

 

PS: no exemplo do link,  experimente arrastar para o lado a tela para aumentar e diminuir para simular as diferentes "resoluções"  e ponha em tela cheia. Funciona. :thumbsup:

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

Bom dia!

O site está no ar, eu habilitei novamente o tela cheia para que vocês possam ver o erro acontecendo.

O site foi acessado de vários celulares e tablets, o problema do tela cheia se mantem, só não acontece mesmo em desktop.

 

Eu tentei sim fechar a tela do navegador para simular telas menores, e o problema também ocorre assim.

Ocorre também no simulador de responsividade.

 

sendrock.com.br

 

O problema está na aba vídeos!

 

@DiF Não entendo muito de programação, por isso estou usando o Adobe Muse para me ajudar. Preciso inserir este html na página em questão e criar um CSS com o código que você passou?

 

Ajudaria se eu enviasse os arquivos do site em um .rar? está bem leve, tem cerca de 2mb

 

Obrigado pela ajuda

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Danilo Pupin Não sei como é esse adobe muse. Mas lá deve ter um modo "editor"

 

O código ali em cima é só um exemplo.. mas você deve colocar o CSS no lugar onde estão os CSS do seu site... já o HTML, você tem que adaptar para o seu propósito.

 

Não podemos fazer isso por você, nem mandando os arquivos.  Eu sugiro você gastar pelo menos 1 ou 2 horas por dia e dar uma estudadinha no html e CSS.  Não é difícil. Em menos de 1 semana, se você estudar mesmo.. aprende.

 

Onde estudar? bem tem zilhões de sites no google, tem o youtube, tem o codeacademy, tem o w3school... enfim.. tem bastante lugar para você adquir e assimilar as informações.

 

 

O meu exemplo é funcional...  Você não fará nada muito diferente daquilo! 

 

PS: já parou para pensar que pode ser o adobe muse que esteja gerando um código cheio de coisas desnecessárias e criando conflito no CSS?  infelizmente é inviável ver aquele código gigante cheio de elementos.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Na realidade eu tenho certeza que a culpa é do Adobe Muse. Mas como sou designer gráfico a interface dele me agrada bastante por ser muito similar a do illustrator e do photoshop.

 

Vou pesquisar mais e ver o que consigo para resolver essa questão. Caso alguém consiga me ajudar com alguma outra dica será de grande agrado.

 

Obrigado.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Dei uma vasculhada no código da página e encontrei a sessão onde estão os vídeos.

 

 <div class="browser_width grpelem" id="u19486-bw">
       <div id="u19486"><!-- column -->
        <div class="clearfix" id="u19486_align_to_page">
         <div class="size_fixed colelem shared_content" id="u25604" data-sizePolicy="fixed" data-pintopage="page_fixedCenter" data-content-guid="u25604_content"><!-- custom html -->
          
<iframe class="actAsDiv" style="width:100%;height:100%;" src="//www.youtube.com/embed/VYyqXwXLsME?autoplay=0&loop=0&showinfo=0&theme=dark&color=red&controls=1&modestbranding=0&start=0&fs=0&iv_load_policy=3&wmode=transparent&rel=0" frameborder="0" allowfullscreen></iframe>

         </div>
         <div class="size_fixed colelem shared_content" id="u25614" data-sizePolicy="fixed" data-pintopage="page_fixedCenter" data-content-guid="u25614_content"><!-- custom html -->
          
<iframe class="actAsDiv" style="width:100%;height:100%;" src="//www.youtube.com/embed/vnLWKmBJZNo?autoplay=0&loop=0&showinfo=0&theme=dark&color=red&controls=1&modestbranding=0&start=0&fs=0&iv_load_policy=3&wmode=transparent&rel=0" frameborder="0" allowfullscreen></iframe>

         </div>
         <div class="size_fixed colelem shared_content" id="u25624" data-sizePolicy="fixed" data-pintopage="page_fixedCenter" data-content-guid="u25624_content"><!-- custom html -->
          
<iframe class="actAsDiv" style="width:100%;height:100%;" src="//www.youtube.com/embed/MZGGDF8wlDE?autoplay=0&loop=0&showinfo=0&theme=dark&color=red&controls=1&modestbranding=0&start=0&fs=0&iv_load_policy=3&wmode=transparent&rel=0" frameborder="0" allowfullscreen></iframe>

         </div>
         <div class="size_fixed colelem shared_content" id="u25634" data-sizePolicy="fixed" data-pintopage="page_fixedCenter" data-content-guid="u25634_content"><!-- custom html -->
          
<iframe class="actAsDiv" style="width:100%;height:100%;" src="//www.youtube.com/embed/bsgWiGLh1tc?autoplay=0&loop=0&showinfo=0&theme=dark&color=red&controls=1&modestbranding=0&start=0&fs=0&iv_load_policy=3&wmode=transparent&rel=0" frameborder="0" allowfullscreen></iframe>

         </div>
         <div class="size_fixed colelem shared_content" id="u25644" data-sizePolicy="fixed" data-pintopage="page_fixedCenter" data-content-guid="u25644_content"><!-- custom html -->
          
<iframe class="actAsDiv" style="width:100%;height:100%;" src="//www.youtube.com/embed/yu7M7DbYf3E?autoplay=0&loop=0&showinfo=0&theme=dark&color=red&controls=1&modestbranding=0&start=0&fs=0&iv_load_policy=3&wmode=transparent&rel=0" frameborder="0" allowfullscreen></iframe>

         </div>
         <div class="size_fixed colelem shared_content" id="u25654" data-sizePolicy="fixed" data-pintopage="page_fixedCenter" data-content-guid="u25654_content"><!-- custom html -->
          
<iframe class="actAsDiv" style="width:100%;height:100%;" src="//www.youtube.com/embed/gVqmhzg9Mac?autoplay=0&loop=0&showinfo=0&theme=dark&color=red&controls=1&modestbranding=0&start=0&fs=0&iv_load_policy=3&wmode=transparent&rel=0" frameborder="0" allowfullscreen></iframe>

         </div>
         <div class="size_fixed colelem shared_content" id="u25659" data-sizePolicy="fixed" data-pintopage="page_fixedCenter" data-content-guid="u25659_content"><!-- custom html -->
          
<iframe class="actAsDiv" style="width:100%;height:100%;" src="//www.youtube.com/embed/dZ675jp9svY?autoplay=0&loop=0&showinfo=0&theme=dark&color=red&controls=1&modestbranding=0&start=0&fs=0&iv_load_policy=3&wmode=transparent&rel=0" frameborder="0" allowfullscreen></iframe>

         </div>
        </div>
       </div>
      </div>

Eu tentei substituir pelo código que o @DiF me passou, e também adicionei o código CSS no arquivo correspondente.

Sem sucesso, na realidade quando fiz a alteração no CSS a página parou de funcionar, com a mensagem de erro do navegador dizendo que alguns arquivos estavam ausentes, limpe o cache ou tente entrar em contato com o desenvolvedor do site.

 

Tentei então adicionar diretamente no Muse, pela função adicionar objeto HTML. Coloquei o código e também crie uma tag style onde inseri o código do CSS. Sem sucesso, os vídeos aparecem mas o mesmo problema acontece ao tentar entrar no tela cheia.

 

Alguma outra ideia de como poder resolver? Tentei tambem embutir um vídeo do vimeo, mas acontece a mesma coisa.

 

Obrigado

Compartilhar este post


Link para o post
Compartilhar em outros sites

Bem, a maneira que encontrei pra solucionar foi criar uma outra pagina html em que inseri somente o código do iframe do youtube junto de uma tag style com o CSS.

Então, linkei uma miniatura do vídeo com essa nova pagina, dessa maneira abre o vídeo em outra aba e executa sem problemas.

 

site atualizado e corrigido: https://sendrock.com.br

 

Ainda gostaria que os vídeos fossem executados na própria página e o fullscreen fosse funcional, portanto se alguém souber como resolver isso... ficaria grato!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora





Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×