Jump to content
Danezin Marques

Como organizar conteúdo de uma div e colocar as imagens no mesmo tamanho

Recommended Posts

Estou usando esse codigo

<div style="display:none;">
<div id="filmes">
#EXTINF:-1 tvg-logo="http://bit.ly/2Gxxd0O" group-title="LANÇAMENTOS", Star Wars: Os Últimos Jedi http://bit.ly/2FVB0qB
#EXTINF:-1 tvg-logo="http://bit.ly/2IuOs34" group-title="LANÇAMENTOS", Jumanji: Bem-vindo à Selva http://bit.ly/2HEAz1f
#EXTINF:-1 tvg-logo="http://bit.ly/2FDG9Vd" group-title="LANÇAMENTOS", Thor: Ragnarok http://bit.ly/2tRkjaZ
#EXTINF:-1 tvg-logo="http://bit.ly/2FMfqSi" group-title="LANÇAMENTOS", Pantera Negra https://dropapk.com/vidembed-kmvsele1xmp0.mp4
</div></div>
<div id="result">
</div>
<script>
var filmes = document.getElementById('filmes').innerHTML.replace(/\n|\r\n/g, '');
var $result = document.getElementById('result');
var lines = filmes.split(/#EXTINF/g);
console.log('lines', lines);
lines.forEach(function(str) {
  if (!str) return
  var p = str.match(/tvg-logo="([^"]+)" group-title="([^"]+)",(.*)(http.*)/)
  if (!p) return
  $result.innerHTML += '<a href="' + p[4] + '" title="' + p[3] + '"><img src="' + p[1] + ' "/></a>';
})

</script>

 

Share this post


Link to post
Share on other sites

Um truquezinho com CSS

 

<style>
.cover {
  width: 200px;
  height: 286px;
  overflow: hidden;
  display: inline-block;
}
</style>
<div style="display:none;">
<div id="filmes">
#EXTINF:-1 tvg-logo="http://bit.ly/2Gxxd0O" group-title="LANÇAMENTOS", Star Wars: Os Últimos Jedi http://bit.ly/2FVB0qB
#EXTINF:-1 tvg-logo="http://bit.ly/2IuOs34" group-title="LANÇAMENTOS", Jumanji: Bem-vindo à Selva http://bit.ly/2HEAz1f
#EXTINF:-1 tvg-logo="http://bit.ly/2FDG9Vd" group-title="LANÇAMENTOS", Thor: Ragnarok http://bit.ly/2tRkjaZ
#EXTINF:-1 tvg-logo="http://bit.ly/2FMfqSi" group-title="LANÇAMENTOS", Pantera Negra https://dropapk.com/vidembed-kmvsele1xmp0.mp4
</div></div>
<div id="result">
</div>
<script>
var filmes = document.getElementById('filmes').innerHTML.replace(/\n|\r\n/g, '');
var $result = document.getElementById('result');
var lines = filmes.split(/#EXTINF/g);
console.log('lines', lines);
lines.forEach(function(str) {
  if (!str) return
  var p = str.match(/tvg-logo="([^"]+)" group-title="([^"]+)",(.*)(http.*)/)
  if (!p) return
  $result.innerHTML += '<a href="' + p[4] + '" title="' + p[3] + '" class="cover"><img src="' + p[1] + ' " width="200" /></a>';
})
</script>

 

Share this post


Link to post
Share on other sites

William Bruno

Poderia me ajudar novamente  quando clico na imagem nao abre mais o player para rolar o video

o link do video ficou assim

https://djralphguarujaeventos.blogspot.com.br/p/httpdelivery/filmes2018/MAZERUNNERLEG-ALTO.mp4

 

estou colocando o codigos com os links novos

 

<style>
.cover {
  width: 200px;
  height: 286px;
  overflow: hidden;
  display: inline-block;
}
</style>
<div style="display:none;">
<div id="filmes">
#EXTINF:-1 tvg-logo="https://goo.gl/NJEzeY" group-title="2018", MAZE RUNNER 3: A CURA MORTAL (LEG)
http://d24nzk5e3n7cvo.cloudfront.net/content/httpdelivery/filmes2018/MAZERUNNERLEG-ALTO.mp4
#EXTINF:-1 tvg-logo="https://goo.gl/qMMdq7" group-title="2018", FALA SÉRIO MÃE! (NAC)
http://d24nzk5e3n7cvo.cloudfront.net/content/httpdelivery/filmes2018/FALASERIEMAE-ALTO.mp4
#EXTINF:-1 tvg-logo="https://goo.gl/tKr24o" group-title="2018", CONSPIRAÇÃO TERRORISTA (DUB)
http://d24nzk5e3n7cvo.cloudfront.net/content/httpdelivery/filmes2018/CONSPIRACAOTERRORISTADUB-ALTO.mp4
#EXTINF:-1 tvg-logo="https://goo.gl/tKr24o" group-title="2018", CONSPIRAÇÃO TERRORISTA (LEG)
http://d24nzk5e3n7cvo.cloudfront.net/content/httpdelivery/filmes2018/CONSPIRACAOTERRORISTALEG-ALTO.mp4
</div></div>
<div id="result">
</div>
<script>
var filmes = document.getElementById('filmes').innerHTML.replace(/\n|\r\n/g, '');
var $result = document.getElementById('result');
var lines = filmes.split(/#EXTINF/g);
console.log('lines', lines);
lines.forEach(function(str) {
  if (!str) return
  var p = str.match(/tvg-logo="([^"]+)" group-title="([^"]+)",(.*)(http.*)/)
  if (!p) return
  $result.innerHTML += '<a href="' + p[4] + '" title="' + p[3] + '" class="cover"><img src="' + p[1] + ' " width="200" /></a>';
})
</script>

 

Share this post


Link to post
Share on other sites

Oi Danezin.

 

Não entendi, o que acontece agora? qual o erro? como o player abria antes?

o link que você postou deu não encontrado.

Share this post


Link to post
Share on other sites

quando coloco o link do video nessa forma 

http://d24nzk5e3n7cvo.cloudfront.net/content/httpdelivery/filmes2018/MAZERUNNERLEG-ALTO.mp4

ele me da erro e nao abre o player em nova janela .

 

mas quando encurtei o link funcionou blz

 

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 lezão
      Boa noite!
      Td bem com vcs?
       
      Meus amigos, estou precisando de um css que eu não faço ideia por onde começar ja pesquisei e nada.
      só encontrei como imagem, vejam.

       
      será que tem como fazer em css desse modelo, o texto tem q ficar sobreposto a cor do fundo.
       
    • By FabianoSouza
      Pessoal, é possível abrir uma nova aba/janela do navegador dentro de uma DIV?
      Como faço?
       
      Pergunto isso porque o IFRAME não vai funcionar para o meu objetivo (já testei).
       
      Estou tentando adaptar esse código JQUERY para o Javascript puro, pra saber se a ideia funciona (não manjo de JQUERY).
      https://stackoverflow.com/questions/33296867/how-to-open-the-content-inside-a-div-tag-in-new-tab
       
      Grato.
    • By kaioneresm
      Olá boa tarde, alguem sabe um codigo javascript facil que sirva para abrir uma div como se fosse um pou-up no centro da tela e dentro dela conter um X para fechá-la? 
       
      obrigado!!
    • By luiz monteiro
      E aí pessoal!
      Minha questão de hoje é a seguinte, ao usar o display inline-block ou inline-flex ocorre um desalinhamento dos blocos. Tentei usar outro inline, porem sem sucesso.
      Para melhor visualizar o que quero dizer, anexo esta uma print do resultado indesejável.
      Preciso que os blocos fiquem alinhados, porem ao inserir duas divs  (2 e 3) no terceiro bloco ocorre o desalinhamento.
      Vou deixar o código para melhor entender.
       
      //==================HTML
       
      <!DOCTYPE html>
      <html lang="pt-br">
      <head>
          <meta charset="utf-8">
          <title></title>
          <link rel="stylesheet" type="text/css" href="./css/style.css">
      </head>
      <body>

          <div class="container">
              
              <div class="blocos">0</div>
              
              <div class="blocos">1</div>
              
              <div class="blocos">
                  <div class="linhas">2</div>
                  <div class="linhas">3</div>
              </div>
              
              <div class="blocos">4</div>
          </div>
       
      </body>
      </html>
       
       
      //================== CSS
      @charset "utf-8";
      *
      {
          margin: 0px;
          padding: 0px;
          list-style: none;
          resize: none;
          outline: none;
          text-decoration: none;
      }
      html, body
      {
          width: 100%;
          overflow-x: hidden;
          font-family: verdana;
          letter-spacing: 1.5555px;
          font-weight: normal;
      }
      .container
      {
          width: 100%;
          padding-left: 13px;
          background: #000;
      }
      .blocos
      {
          display: inline-block;
          width: 300px;
          height: 250px;
          background: #888;
      }
      .linhas
      {
          background: #f60;
          width: 100%;
          height: 122px;
          margin-bottom: 2px;
      }
       
      Agradeço desde já.
       
       
       

    • By LucasRochaPL
      Olá a todos, estou construindo um pequeno site para a empresa que eu trabalho atualmente, porém como ainda sou iniciante estou tendo algumas dificuldades, e uma delas é que eu não consigo colocar as divs lado a lado, tentei varias coisas como usar o inline e float, mas fica tudo bem bagunçado, se vocês puderem por favor dar alguma dica ou me dizer oque estou fazendo de errado.
      <style> * {box-sizing: border-box;}   .container {   position: relative;   width: 50%;   max-width: 300px; }   .image {   display: block;   width: 100%;   height: auto; }   .overlay {   position: absolute;    bottom: 0;    background: rgb(0, 0, 0);   background: rgba(0, 0, 0, 0.5); /* Black see-through */   color: #f1f1f1;    width: 100%;   transition: .5s ease;   opacity:0;   color: white;   font-size: 20px;   padding: 20px;   text-align: center; }   .container:hover .overlay {   opacity: 1; } .container::after {   content: "";   clear: both;   display: table; } </style>   <div class="titulo">Produtos</div> <p>A Gap conta com uma grande variedade de      rádios e equipamentos, para atender melhor      a necessidade de nossos clientes, trabalhamos com rádios moveis,      portáteis e equipamentos para videomonitoramento. </p>   <div class="titulo">Portáteis</div> <div class="container">     <img src="products/images/dep450.jpg" alt="rádio motorola DEP450" class="image">     <div class="overlay">Motorola DEP450</div> </div> <div class="container">     <img src="products/images/ep450.jpg" alt="rádio motorola EP450" class="image">     <div class="overlay">Motorola EP450</div> </div> <div class="container">     <img src="products/images/dgp8050.jpg" alt="rádio motorola DGP8050" class="image">     <div class="overlay">Motorola DGP8050</div> </div>   <div class="titulo">Móveis</div>   <div class="container">     <img src="products/images/dem300.jpg" alt="rádio motorola DGM5000" class="image">     <div class="overlay">Motorola DEM300</div> </div>   <div class="titulo">Videomonitoramento</div>   <div class="container">     <img src="products/images/intelbrass3330.jpg" alt="camera " class="image">     <div class="overlay">Câmera Intelbras S3330</div> </div>   
×

Important Information

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