GUJ Discussões   :   últimos tópicos   |   categorias   |   GUJ Respostas

[RESOLVIDO] Vídeo como background não roda às vezes

css
html
bootstrap
Tags: #<Tag:0x00007f61027a80b8> #<Tag:0x00007f61027aff70> #<Tag:0x00007f61027afe30>
#1

Bom dia!

Possuo uma div fixa que fica rodando o vídeo como background sem parar como um loop mas às vezes funciona e não… Aí tenho que ficar dando F5 até chegar o momento de funcionar sozinho.

Como faz pra fazer funcionar direto?

section id="intro"
video autoplay loop poster="img/bg-intro-money-master.jpg"
source src=“img/bg-intro-money-master.mp4” type=“video/mp4”
/video
div class=“intro-container wow fadeIn"
h1 class=“mb-4 pb-0”>Em busca do
maior TRADER do Brasil</h1
p class=“mb-4 pb-0”>4 a 9 de fevereiro de 2019


a href=“https://youtu.be/k_FmYAMnOuM” class=“venobox play-btn mb-4” data-vbtype=“video"
data-autoplay=“true”></a
a href=”#schedule” class=“about-btn scrollto”>Assista os episódios</a
/div> </section

Tirei alguns da tag para que possa visualizar o código pois não sei como formata aqui.

0 Likes

#2

o código está todo bagunçado.

0 Likes

#3

Clica em </> ou escreve entre [ code] [/code ]

OBS: retirar o espaço em branco dos codes

0 Likes

#4
<section id="intro">
    <video autoplay loop poster="img/bg-intro-money-master.jpg" style="width: 100%; height: 100%;">
      <source src="img/bg-intro-money-master.mp4" type="video/mp4">
    </video>
    <div class="intro-container wow fadeIn">
      <h1 class="mb-4 pb-0">Em busca do<br><span>maior TRADER</span> do Brasil</h1>
      <p class="mb-4 pb-0">4 a 9 de fevereiro de 2019</p>
      <a href="https://youtu.be/k_FmYAMnOuM" class="venobox play-btn mb-4" data-vbtype="video"
        data-autoplay="true"></a>
      <a href="#schedule" class="about-btn scrollto">Assista os episódios</a>
    </div>
  </section>
#intro {
  width: 100%;
  height: 100vh;
  background-size: cover;
  overflow: hidden;
  position: relative;
  bottom: 250px;
}

#intro:before {
  content: "";
  background: rgba(6, 12, 34, 0.8);
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
}
0 Likes

#5

Dá uma olhada nesse site, é algo relativo ao seu código:

obs. 1 : tenta não usar um “youtube”, tenta baixar o vídeo em mp4 e só substituir entendendo o code. Acredito não ser uma boa prática exibir diretamente do youtube

1 Like

#6

O YouTube ali no link é do botão aqui que quando é clicado é levado pra lá. A parte do vídeo para deixar rodando está salvo aqui em .MP4, como abaixo:

<video autoplay loop poster="img/bg-intro-money-master.jpg" style="width: 100%; height: 100%;">
  <source src="img/bg-intro-money-master.mp4" type="video/mp4">
</video>
0 Likes

#7
<header>
  <div class="overlay"></div>
  <video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
    <source src="https://storage.googleapis.com/coverr-main/mp4/Mt_Baker.mp4" type="video/mp4">
  </video>
  <div class="container h-100">
    <div class="d-flex h-100 text-center align-items-center">
      <div class="w-100 text-white">
        <h1 class="display-3">Video Header</h1>
        <h2>With HTML5 Video and Bootstrap 4</h2>
      </div>
    </div>
  </div>
</header>

isso não funcionou?

0 Likes

#8

Funcionou agora!! :sweat_smile:

Muito obrigado!

0 Likes

#9

só subst. o source src=" aqui vai seu vídeo"

0 Likes