Jump to content
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>

 

Share this post


Link to post
Share on other 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.;

Share this post


Link to post
Share on other 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.

Share this post


Link to post
Share on other 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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By luigiferrari
      Boa noite, estou precisando de uma ajuda...
       
      Peguei um scrip de calendário e estou listando os dados em uma janela modal:

      O que eu gostaria de fazer é: colocar um botão para direcionar para um link onde o usuário poderá editar.
       
      Eu estou tentando várias vezes, já consegui que o botão aparecesse, porém ou aparece vários botões juntos(com todos os id cadastrados) ou aparece assim:

       
       
      Aqui estão os seguintes códigos:
       
       
      <script> $(document).ready(function() { $('#calendar').fullCalendar({ header: { left: 'prev,next today', center: 'title', right: 'month,agendaWeek,agendaDay' }, defaultDate: Date(), navLinks: true, // can click day/week names to navigate views editable: true, eventLimit: true, // allow "more" link when too many events eventClick: function(event) { $('#visualizar #id').text(event.id); $('#visualizar #title').text(event.title); $('#visualizar #start').text(event.start.format('DD/MM/YYYY')); $('#visualizar #Horario_saida').text(event.Horario_saida); $('#visualizar #Horario_retorno').text(event.Horario_retorno); $('#visualizar #Nome').text(event.Nome); $('#visualizar #Motorista').text(event.Motorista); $('#visualizar').modal('show'); return false; }, events: [ <?php while($row_events = mysqli_fetch_array($resultado_events)){ ?> { id: '<?php echo $row_events['id']; ?>', title: '<?php echo $row_events['title']; ?>', start: '<?php echo $row_events['start']; ?>', Horario_saida: '<?php echo $row_events['Horario_saida']; ?>', Horario_retorno: '<?php echo $row_events['Horario_retorno']; ?>', Nome: '<?php echo $row_events['Nome']; ?>', Motorista: '<?php echo $row_events['Motorista']; ?>', },<?php } ?> ] }); }); </script> <div class="row"> <div class="col-md-6"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title painel-title-responsive">Calendário</h3> </div> <div class="panel-body"> <div id='calendar'></div> <div class="modal fade" id="visualizar" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" data-backdrop="static"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <h4 class="modal-title text-center">Dados do Evento</h4> </div> <div class="modal-body"> <dl class="dl-horizontal"> <dt>Id:</dt> <dd id="id"></dd> <dt>Nome:</dt> <dd id="Nome"></dd> <dt>Local:</dt> <dd id="title"></dd> <dt>Data:</dt> <dd id="start"></dd> <dt>Saida:</dt> <dd id="Horario_saida"></dd> <dt>Retorno:</dt> <dd id="Horario_retorno"></dd> <dt>Motorista:</dt> <dd id="Motorista"></dd> <div class="col-md-7"></div> <div class="col-md-5"> </dl> <a href="entrar.php?="id='id'">a</a> </div> </div> </div> </div> </div> O erro está na parte do "entrar.php="id='id'", mas não consigo fazer com que apareça apenas um botão com o id correto. Pensei em criar uma variável ou algo assim mas não deu muito certo.
      Poderiam me ajudar?
      Agradeço desde já!!!
    • By athosmrodrigues@gmail.com
      Eu quero fazer um botão que quando eu clicar nele o h1 e o botão (ou h2,p1 e p2)seja modificado como:
       
      Começar                                      Tem serteza?
       [OK]                 Depois-->               [SIM]                       Podem me ajudar?
                        quando clicar no                                         se sim obrigado.
                  botão OK
    • By Natália Prego Côco Mendes
      Boa tarde.
       
      Estou a começar a trabalhar com o Dreamweaver e estou com dificuldade e conseguir este efeito na minha página (enviei foto). Já consegui montar a parte de cima, mas agora ao tentar fazer o bloco de baixo, com tit, foto e texto, não consigo que fique alinhado como está na foto. Será que podem ajudar-me? Eu tenho o seguinte código e CSS feito:
      <!doctype html>
      <html>
      <head>
      <meta charset="UTF-8">
      <title>index.html</title>
      <link href="exp.css" rel="stylesheet" type="text/css">
      </head>
      <body tracingsrc="Newsletter_2.jpg" tracingopacity="30">
        <div class="logo"><img src="imagens/Ellipse_1.png" width="221" height="42" alt=""/></div>
      <header class="header">
        <div class="texto-topo">texto topo texto topo</div>
          </header>
      <div class="bloco-a"><div class="tit-bloco-a">título bloco a</div>
      <div class="foto-bloco-a"><img src="imagens/foto1.png" width="222" height="211" alt=""/></div>
      <div class="txt-bloco-a">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. 
      </div></div>
      </body>
      </html>
       
      @charset "UTF-8";
      *{
          margin:0 auto;
      }
      .logo {
          width: 30px;
          height: 20px;
          margin-top: 95px;
          margin-left: 356px;
          float: left;
      }
      .texto-topo {
          width: 600px;
          margin-left: 93px;
          margin-top: 20px;
          width: 591px;
          height: 42px;
          font-family: Rift;
          color: #0e3659;
          font-size: 35px;
          font-weight: 700;
          transform: scale(1.152,1.152);
      }
      .tit-bloco-a {
          width: 154px;
          height: 25px;
          float: left;
          margin-top: 724px;
          margin-left: -475px;
      }
      .foto-bloco-a img {
          width: 222px;
          height: 211px;
          float: left;
          float: left
      }
      }
      .header {
          width: 688px;
          height: 390px;
          margin-left: 196px;
          margin-top: 301px;
          background-image: url(imagens/salty-wings-1432145-unsplash.png);
          position: absolute;
          
          
      }
      .tit-bloco-a{
          width: 154px;
          height: 25px;
          font-family: Rift;
          color: #0e3659;
          font-size: 35px;
          font-weight: 700;
          float: left;
      }
      .txt-bloco-a {
          width: 216px;
          height: 120px;
          font-family: Rift;
          color: rgba(14, 54, 89, 0.8);
          font-size: 15px;
          font-weight: 700;
          transform: scale(1.01,1.01);
          margin-top: 750px;
          text-align: center;
          float: left;
      }
      .bloco-a {
          width: 216px;
          height: 600;
          margin-top: 1000px;
          margin-left: 196;
          float: left;
          position: absolute;
      }

    • By Alan Arnese
      Bom dia pessoal
       
      Estou estruturando um slideshow puro em css3 + html mas percebi que vou precisar de jquery para algumas funções, eu vinculei radios com lables para a navegação do menu e consegui montar em jquery o efeito "active" para quando é clicado em um botão, tudo funcionando perfeitamente e responsivamente nos browsers.

      Só que agora eu preciso que os slides passem automaticamente e vinculados a navegação, trocando ambos da direta pra esquerda, mantendo o efeito "active" na navegação com harmonia com as imagens, todos os exemplos que saí atrás na internet não vinculam radios com lables para navegação, então isso está me causando uma dificuldade além do que esperava, desde já agradeço a ajuda de vocês
       
      Segue abaixo os códigos
      Index.html
      <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="slidershow middle"> <div class="slides"> <input type="radio" name="r" id="r1" checked> <input type="radio" name="r" id="r2"> <input type="radio" name="r" id="r3"> <input type="radio" name="r" id="r4"> <input type="radio" name="r" id="r5"> <div class="slide s1"> <a href="#"> <img src="1.jpg" alt=""></a> </div> <div class="slide"> <a href="#"><img src="2.jpg" alt=""></a> </div> <div class="slide"> <a href="#"><img src="3.jpg" alt=""></a> </div> <div class="slide"> <a href="#"><img src="4.jpg" alt=""></a> </div> <div class="slide"> <a href="#"><img src="5.jpg" alt=""></a> </div> </div> <div class="navigation"> <label for="r1" class="bar active"></label> <label for="r2" class="bar"></label> <label for="r3" class="bar"></label> <label for="r4" class="bar"></label> <label for="r5" class="bar"></label> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <script type="text/javascript"> $(document).on('click', 'label', function() { $(this).addClass('active').siblings().removeClass('active') }) </script> </body> </html>  style.css
       
      *{ margin: 0px; padding: 0px;} .slidershow{ width: 100%; height: 100%; overflow: hidden; position: absolute; max-height: 70%; } .middle{ position: absolute; } .navigation{ position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; } .bar{ width: 60px; height: 5px; background-color: #c1c0c0; margin: 6px; cursor: pointer; transition: 0.4s; } .bar:hover{ background: #ddcf19; } .bar.active{ background: #ddcf19; } input[name="r"]{ position: absolute; visibility: hidden; } .slides{ width: 500%; height: 100%; display: flex; } .slide{ width: 20%; transition: 0.6s; } .slide a{ display: block; width: 100%; height: 100%; cursor: pointer;} .slide img{ width: 100%; height: 100%; object-fit: cover; } #r1:checked ~ .s1{ margin-left: 0; } #r2:checked ~ .s1{ margin-left: -20%; } #r3:checked ~ .s1{ margin-left: -40%; } #r4:checked ~ .s1{ margin-left: -60%; } #r5:checked ~ .s1{ margin-left: -80%; } Basicamente quero como o link abaixo mas vinculando meus controles de navegação
       
      Exemplo
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.