Video background intro


Topic: Video background intro

allancmello pro asked 2 months ago

Expected:"Video background intro" runs on all browsers.

Problem: Video background intro works on Edge and Firefox browsers, but it doesn't work on Chrome. Is there a specific procedure for the video to play in Chrome?

Screens: Attached images running on Chrome, Firefox and Edge.

Sample of MDB: https://mdbootstrap.com/docs/angular/sections/intros/#v-6

Code file countdown.component.html:

<div style="height: 100vh">
<!-- Main navigation -->
<header>
  <!-- Full Page Intro -->
  <div id="intro-section" class="view">

    <video class="video-intro" style="height:900px" poster="https://clubb2b.com.br/images/background.jpg" playsinline autoplay muted loop>
      <source src="https://clubb2b.com.br/videos/ouro.mp4" type="video/mp4">
    </video>
    <!-- Mask & flexbox options-->
    <div class="mask rgba-gradient d-flex justify-content-center align-items-center">
      <!-- Content -->
      <div class="container px-md-3 px-sm-0">
        <!--Grid row-->
        <div class="row wow fadeIn">
          <!--Grid column-->
          <div class="col-md-12 mb-4 white-text text-center mb-0 mt-5 pt-md-5 pt-5 wow fadeIn">
            <h1 class="display-3 font-weight-bold sombra">
              <a class="font-weight-bold text-success sombra">Club</a>
              <a class="font-weight-bold text-warning sombra">B</a>
              <a class="font-weight-bold text-primary sombra">2</a>
              <a class="font-weight-bold sombra">B</a>
              <a class="font-weight-bold text-success sombra"> Group</a>
            </h1>
            <h1 class="font-weight-bold white-text sombra">
              O seu Clube de Negócios Business to Business
            </h1>
            <hr class="hr-light my-4 w-95">
            <h4 class="subtext-header mt-2 mb-4 text-justify">
              Amplie seus horizontes, quebre paradigmas, expanda a carteira de negócios da sua empresa, esteja online
              e conquiste maior visibilidade de sua marca, aumente a sua rede de negócios
              <a class="font-weight-bold text-warning">B</a>
              <a class="font-weight-bold text-primary">2</a>
              <a class="font-weight-bold">B</a>.
              <p>Nós da 
                <a class="font-weight-bold text-success">Club</a>
                <a class="font-weight-bold text-warning">B</a>
                <a class="font-weight-bold text-primary">2</a>
                <a class="font-weight-bold">B</a>
                <a class="font-weight-bold text-success"> Group</a>,
                geramos novas oportunidades de negócios para você e para seus parceiros, ampliando sua rede de negócios
                e criando novas parcerias, aumentando assim a competitividade de sua empresa no mercado de atuação da
                mesma e em novos mercados.
                No mundo <a class="font-weight-bold text-success">Club</a><a class="font-weight-bold text-warning">B</a>
                <a class="font-weight-bold text-primary">2</a><a class="font-weight-bold">B</a>
                <a class="font-weight-bold text-success"> Group</a>, tudo é feito pensando em geração e manutenção de
                negócios.
              </p>
              <p class="font-weight-bold text-center sombra">Em breve estaremos online para servi-los!</p>
              <h1 class="display-3 font-weight-bold text-center amber-text mb-0 mt-3 pt-md-2 pt-2 pb-md-2 pb-2 sombra">
                SITE EM CONSTRUÇÃO
              </h1>
              <div class="timer">
                <h4 class="font-weight-bold red-text sombra"> Contagem Regressiva </h4>
                <span id="days" class="font-weight-bold teal-text sombra"> {{daysToDday}} </span>
                <a class="font-weight-bold sombra">Dia(s)</a>
                <span id="hours" class="font-weight-bold teal-text sombra"> {{hoursToDday}} </span>
                <a class="font-weight-bold sombra">Hs</a> 
                <span id="minutes" class="font-weight-bold teal-text sombra"> {{minutesToDday}} </span>
                <a class="font-weight-bold sombra">Min</a>
                <span id="seconds" class="font-weight-bold teal-text sombra"> {{secondsToDday}} </span>
                <a class="font-weight-bold sombra">Seg</a>
            </div>
            </h4> 
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- Full Page Intro -->
</header>

In Chrome not working:

enter image description here

In Firefox and Edge video working:

enter image description here

In Chrome the cache was cleared, but it didn't work after clearing cache.


Arkadiusz Idzikowski staff commented 2 months ago

@allancmello Please edit your post and provide an example code on which we will be able to reproduce this problem.


allancmello pro commented 1 months ago

Hi Arkadiusz, code published. Copied from the same MDB example Video background intro.


Arkadiusz Idzikowski staff commented 1 months ago

@allancmello Thank you for the code. You have unclosed div tag: <div style="height: 100vh">, when I removed it, the video worked correctly even in chrome (tested on v91.0.4472.77).

Please make sure that you copied CSS code from example in documentation to global styles in styles.scss file.


allancmello pro commented 1 months ago

Hi Arkadiusz, The div tag: it just wasn't copied together in the code sent. If the closing of the tag was missing, it would give an error in the execution of the site. Moved css code from countdown.component.scss to style.scss. And the problem remains, the video is not only displayed in Chrome. I'm using scss and not css. I don't know if it makes any difference.


Arkadiusz Idzikowski staff answered 1 months ago

It looks like muted attribute is not working correctly and chrome automatically disables autoplay if this attribute is not set. Please try to change muted to onloadedmetadata and autoplay to oncanplay like in following example:

  <video
    #video
    class="video-intro"
    style="height:900px"
    poster="https://clubb2b.com.br/images/background.jpg"
    playsinline
    oncanplay="this.play()"
    onloadedmetadata="this.muted=true"
    loop
  >
    <source src="https://clubb2b.com.br/videos/ouro.mp4" type="video/mp4" />
  </video>

Please insert min. 20 characters.
Status

Resolved

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: MDB4 11.1.0
  • Device: Desktop
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: Yes