Ir para conteúdo
AndréAraujo

Sobrepor div a um <iframe> em modo fullscreen

Recommended Posts

Um exemplo, no Google Chrome o "z-index:2147483647" consegue fazer a div se

sobrepor ao iframe sem problemas, já nos outros navegadores não estou conseguindo

fazer <div id"controls"> se sobrepor ao iframe, alguém conhece alguma forma de sobrepor

o iframe ou tem alguma ideia do que eu estou fazendo de errado?

 

Segue o exemplo: 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
    <title>Teste</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <style>
        #contarner_video{
          padding-bottom:56.25%;
            height:0;
            border-radius:inherit;
            overflow:hidden;
            z-index:0;
        }
        #contarner_video iframe{
            position:absolute;
            top:0;
            left:0;
            width:100%;
            height:100%;
            border:0;
        }
        #ytplayer{
          display:block;
        }
        #controls{
          width:100%;
          height:30px;
          background-color:#000;
          opacity:0.9;
            position:absolute;
            top:0;
            left:0;
            z-index:2147483647;
        }
        #controls span{
          line-height:30px;
          padding:0 20px;
          color:#fff;
          float:right;
        }
    </style>
</head>

<body>

    <div id="contarner_video">
      <iframe id="ytplayer" type="text/html" width="720" height="405"
      src="https://www.youtube.com/embed/M7lc1UVf-VE?controls=0&enablejsapi=1&fs=0&rel=0&showinfo=0&iv_load_policy=3" frameborder="0" allowfullscreen></iframe>
      <div id="controls">
        <span>FullScreen</span>
      </div>
    </div>

    <script>
        $('#controls span').on('click', function(){
            var e = document.getElementById("ytplayer");
            if (e.requestFullscreen) {
                e.requestFullscreen();
            } else if (e.mozRequestFullScreen) {
                e.mozRequestFullScreen();
            } else if (e.webkitRequestFullscreen) {
                e.webkitRequestFullscreen();
            } else if (e.msRequestFullscreen) {
                e.msRequestFullscreen();
            }
        });

    </script>

</body>
</html>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Testei nos seguintes browsers:

  1. Google Chrome;
    1. Versão 64.0.3282.167 (Versão oficial) 64 bits.
  2. Opera;
    1. 51.0.2830.34 (64 bits);
  3. Firefox;
    1. 58.0.2 (64-bits).
  4. Internet Explorer 8.

O único navegador que não fez o vídeo ficar em tela cheia ou a div sobrepor, foi o IE8. No entanto, essa versão é bem velhinha e você não falou nada sobre suporte à esses navegadores.

 

Vamos fazer o seguinte?

  1. Confere se teus navegadores estão atualizados;
    1. Se estiverem:
      1. Posta o resto código HTML, CSS e JS;
      2. Manda print do bug, em cada navegador;
      3. Diz quais navegadores e versões você está testando.
    2. Se não estiverem:
      1. Atualiza;
      2. Testa;
        1. Se funcionar:
          1. Aproveite.
        2. Se não funcionar:
          1. Posta o resto do código HTML, CSS e JS;
          2. Manda print do bug, em cada navegador;
          3. Diz quais navegadores e versões você está testando.;

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olá Joao_Lucaas, obrigado por me responder!

Acho que acabei me expressando mal, não citei que no exemplo acima

o vídeo esta configurado para ocupar 100% da tela mas não esta

em fullscreen, tem um botão escrito FullScreen no canto superior

direito que ativa o fullscreen.

 

Caso não seja esse o caso minhas versões de navegadores são:

  • Google Chrome 64.0.3282.167 (Versão oficial) 32 bits (atualizado) (sem bug)
  • Opera (51.0) 51.0.2830.34 (atualizado) (sem bug)
  • Firefox Quantum 58.0.2 (32-bit) (atualizado) (com bug)
  • Microsoft Edge 20.10240.16384.0 (com bug)
  • Internet Explorer(11)  11.0.10240.16384 (com bug)

Navegadores com bug: 

sasa.thumb.jpg.6799ce9c5630bac102c81bc7ee53285d.jpg

 

Navegadores sem bug:

221.thumb.jpg.6d7c07c0a9feb44fd8aa1a55a8d17ed5.jpg

 

O código que eu estou testando é esse mesmo.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olá Joao_Lucaas, consegui resolver o problema de uma forma

até bem simples, no lugar de chamar o id "ytplayer"  do iframe

no script, chamei o id "contarner_video" / "container_video" , 

aplicando fullscreen na div e não no iframe, fazendo com que

a div "controls" ficasse visível no modo fullscreen em todos os

navegadores que testei.

  • +1 1

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

  • Conteúdo Similar

    • Por Artes Ussler
      Bom dia
       
      Alguns navegadores sublinham ou trocam a cor dos números de telefones que estão no site.
       
      Como faço para remover isso?
       
      Se alguém puder ajudar, eu fico grato.
    • Por ericknb
      Bom dia Pessoal,
       
      Sou bem leigo no assunto e toda ajuda é bem vinda.
       
      Vamos lá. Possuo um ecommerce, numa parte do site tem um campo de Newsletter. Mas o fundo dele é um cinza e eu gostaria de alterar para uma imagem (uma imagem anexada para mostrar o fundo cinza que quero alterar. 
       
      Segue o código:
       
      <section class="newsletter" data-tray-tst="newsletter_box">
          <h2 class="newsletter-title">
              <i><svg version="1.1" fill="#000" width="30" height="33" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 489.66 343.793" enable-background="new 0 0 489.66 343.793" xml:space="preserve"><g><path d="M489.66,32.781v-1.906c0-7.078-3.215-15.406-8.984-21.176l-0.652-0.656c0,0-0.656,0-0.656-0.652c-1.309-1.313-2.559-1.907-3.867-3.215c-0.652,0-0.652-0.653-1.309-0.653c-1.309-0.656-3.211-1.312-4.52-1.906c-0.656,0-0.656-0.652-1.309-0.652c-1.906-0.656-3.867-1.309-5.773-1.309h-1.309c-1.902,0-4.52-0.656-7.078-0.656H34.742c-2.558,0-5.117,0-7.734,0.656c-0.653,0-1.309,0-1.903,0.653c-1.906,0.656-3.867,0.656-5.117,1.308c-0.656,0-0.656,0.656-1.308,0.656c-1.309,0.653-3.215,1.309-4.524,1.903l-0.652,0.656c-1.309,0.652-2.559,1.902-3.867,2.559L7.73,10.293C3.211,15.41,0.656,21.238,0,27.664v288.524c1.309,8.983,5.77,16.718,12.195,21.179c5.77,3.867,12.848,6.426,21.18,6.426h422.793c1.902,0,4.52,0,6.422-0.655h1.309c1.906-0.653,3.867-0.653,5.117-1.31h0.656c14.156-5.117,19.926-17.371,19.926-28.91V33.375C489.66,33.434,489.66,33.434,489.66,32.781L489.66,32.781z M448.551,23.797L246.168,221.004l-46.281-44.973L41.168,23.738h407.383V23.797z M23.855,307.146V39.859l149.676,143.907L23.855,307.146z M239.742,320.59H45.035l145.867-119.512l46.879,45.629c1.903,1.902,3.867,2.56,5.77,3.211h3.926c1.902-0.651,4.52-1.309,5.77-3.211l44.32-43.069l146.465,116.956H239.742V320.59z M465.863,307.742L315.535,186.324L465.863,39.859V307.742z M465.863,307.742"/></g></svg></i>
              <span>{{ Translation('news') }}</span>
          </h2>
          <form action="{{ links.newsletter }}" method="post" name="newsletter" data-tray-tst="newsletter_form">
              <input name="name" type="text" placeholder="{{ Translation('digitar_nome') }}" required>
              <input name="email" type="email" placeholder="{{ Translation('digitar_email') }}" data-tray-tst="newsletter_email" required>
              <button data-tray-tst="newsletter_cadastrar">{{ Translation('cadastrar') }}</button>
          </form>
      </section><section class="newsletter" data-tray-tst="newsletter_box">
          <h2 class="newsletter-title">
              <i><svg version="1.1" fill="#000" width="30" height="33" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 489.66 343.793" enable-background="new 0 0 489.66 343.793" xml:space="preserve"><g><path d="M489.66,32.781v-1.906c0-7.078-3.215-15.406-8.984-21.176l-0.652-0.656c0,0-0.656,0-0.656-0.652c-1.309-1.313-2.559-1.907-3.867-3.215c-0.652,0-0.652-0.653-1.309-0.653c-1.309-0.656-3.211-1.312-4.52-1.906c-0.656,0-0.656-0.652-1.309-0.652c-1.906-0.656-3.867-1.309-5.773-1.309h-1.309c-1.902,0-4.52-0.656-7.078-0.656H34.742c-2.558,0-5.117,0-7.734,0.656c-0.653,0-1.309,0-1.903,0.653c-1.906,0.656-3.867,0.656-5.117,1.308c-0.656,0-0.656,0.656-1.308,0.656c-1.309,0.653-3.215,1.309-4.524,1.903l-0.652,0.656c-1.309,0.652-2.559,1.902-3.867,2.559L7.73,10.293C3.211,15.41,0.656,21.238,0,27.664v288.524c1.309,8.983,5.77,16.718,12.195,21.179c5.77,3.867,12.848,6.426,21.18,6.426h422.793c1.902,0,4.52,0,6.422-0.655h1.309c1.906-0.653,3.867-0.653,5.117-1.31h0.656c14.156-5.117,19.926-17.371,19.926-28.91V33.375C489.66,33.434,489.66,33.434,489.66,32.781L489.66,32.781z M448.551,23.797L246.168,221.004l-46.281-44.973L41.168,23.738h407.383V23.797z M23.855,307.146V39.859l149.676,143.907L23.855,307.146z M239.742,320.59H45.035l145.867-119.512l46.879,45.629c1.903,1.902,3.867,2.56,5.77,3.211h3.926c1.902-0.651,4.52-1.309,5.77-3.211l44.32-43.069l146.465,116.956H239.742V320.59z M465.863,307.742L315.535,186.324L465.863,39.859V307.742z M465.863,307.742"/></g></svg></i>
              <span>{{ Translation('news') }}</span>
          </h2>
          <form action="{{ links.newsletter }}" method="post" name="newsletter" data-tray-tst="newsletter_form">
              <input name="name" type="text" placeholder="{{ Translation('digitar_nome') }}" required>
              <input name="email" type="email" placeholder="{{ Translation('digitar_email') }}" data-tray-tst="newsletter_email" required>
              <button data-tray-tst="newsletter_cadastrar">{{ Translation('cadastrar') }}</button>
          </form>
      </section>
       
       
      o que eu teria de alterar para inserir a imagem como fundo?
      Grato
       

    • Por freitaz
      Bom eu criei um sistema de cadastro, estava tudo ok, no localhost, mas quando subi para o servidor, teve paginas que não carregou o html, 
      e ficou dessa forma

       
      Gostaria de ajuda, e desde já agradeço! 
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.