Angular parallax video with *ngIf


Topic: Angular parallax video with *ngIf

Ungr pro premium asked 6 days ago

Hello,

so I got this issue where the parallax video is not loaded after I add *ngIf directive. Without the directive video plays fine.

Do you have any suggestions how to fix this?

<div class="view jarallax" *ngIf="parallax === 'home'" data-jarallax-video="mp4:../../../../../assets/vid/app/pages/intro.mp4">
    <div class="mask rgba-stylish-light d-flex justify-content-center align-items-center">
        <div class="container">
            <div class="row">
                <div class="col-md-12 text-white text-center">
                    <h1 class="display-4 font-weight-bold">Title</h1>
                    <hr class="hr-light">
                    <h2 class="lead mb-3 ff-ro">Title 2</h2>
                    <div class="smooth-scroll mt-5">
                        <a mdbBtn color="white" mdbWavesEffect outline="true" href="#lpg-2"><i class="fa fa-home"></i> Btn 2</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Arkadiusz Idzikowski staff commented 6 days ago

What is the exact problem in this case? The video is not loaded at all or there is simply no parallax effect?

Can you provide an example with full code (html and ts) so we can debug this problem properly?


Ungr pro premium commented 6 days ago

The problem is *ngIf="parallax === true" depends on variable that is filled with async call

So my guess is solution would be to set data-jarallax-video="..." to parallax element after async response was returned and refresh the element. But there is no documentation how to do such things like that with angular.


Damian Gemza staff answered 5 days ago

Dear @Ungr

Did you tried following solution? Adding video as property binding:

.html:

<div class="view intro" style="background-image: none; z-index: 0; min-height: 700px;">
  <div class="full-bg-img mask rgba-white-light">
    <div class="container flex-center">
      <div class="row mt-5 py-5">
        <div class="col-md-12 wow fadeIn mb-3" style="animation-name: none; visibility: visible;">
          <div class="text-center">
            <h2 class="h1 display-2 mb-2 wow fadeInDown" data-wow-delay="0.3s">ANNA'S <a class="white-text font-bold">BLOG</a></h2>
            <h5 class="font-up mb-3 mt-1 font-bold wow fadeInDown" data-wow-delay="0.4s">Interior designer & Nature lover</h5>
            <a mdbBtn color="elegant" size="lg" class="wow fadeInDown waves-effect waves-light" mdbWavesEffect data-wow-delay="0.4s">portfolio</a>
            <a mdbBtn color="white" outline="true" size="lg" class="wow fadeInDown waves-effect waves-light" mdbWavesEffect data-wow-delay="0.4s">About me</a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="video-parallax" *ngIf="video"><video [src]="video" frameborder="0" autoplay="" loop=""></video>
  </div>
</div>

<div class="container">
  <!--Grid row-->
  <div class="row">
    <!--Grid column-->
    <div class="col-md-12 text-center my-5">
      <h2 class="h1 font-bold grey-text mb-5">Lorem ipsum dolor sit amet, consectetur quis elit.</h2>
      <p align="justify">Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.</p>
    </div>
    <!--Grid column-->
  </div>
  <!--Grid row-->
</div>

.ts:

 video = '';

  ngAfterViewInit() {
    setTimeout(() => {
      this.video = 'https://mdbootstrap.com/img/video/flowers.mp4';
    }, 4000);
  }

Best Regards,

Damian


Ungr pro premium answered 5 days ago

Hello Damian,

this is a tricky answer as Ive tried this aproach before and the video loads fine. However parallax effect is missing here.

The only way I was able to achieve parallax effect was to use:

<div class="view jarallax" *ngIf="parallax === 'home'" data-jarallax-video="mp4:../../../../../assets/vid/app/pages/intro.mp4">

Using:

<div class="video-parallax" *ngIf="video"><video [src]="video" frameborder="0" autoplay="" loop=""></video>
  </div>

is just a normal video without parallax..


Damian Gemza staff commented 4 days ago

So combine those two approaches - use [attr.data-jarallax-video]="video". Maybe this will work for you.


Ungr pro premium answered 4 days ago

No. This doesnt really work. Any other suggestions to solve this?

Seems to me you dont really support video parallax in angular..


Damian Gemza staff commented 20 hours ago

Unfortunately, I have no other idea. I'll have to debug this problem. We'll let you know when this problem will be resolved.

EDIT: Could you please send me your project via email? You can find me here: d.gemza@mdbootstrap.com

Best Regards,

Damian


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: Angular
  • MDB Version: 7.5.4
  • Device: PC
  • Browser: Chrome
  • OS: Win
  • Provided sample code: No
  • Provided link: No
Tags