How to embbed a youtube clip into the Canvas Swiper Slider

4 replies · opened Apr 15, 2020

Ddata0Apr 15, 2020

Hi, I am using the canvas swiper slider as a the homepage slider 1 and movie slider 2. Now displaying the movie from site is taking a long loading time, I want to try it true youtube hoping that it will take less time, also including a lower data-loader-timeout as I have learned on this forum.
My movie slider is as followed and My goal is to replace this with a youtube version, any options out there?

Kind regards, Camiel

<div class="swiper-slide dark">
<div class="container clearfix">
<div class="slider-caption slider-caption-center">
<h2 data-animate="fadeInUp">Captain Mac repareert al Macs sinds 2009</h2>
<p class="d-none d-sm-block" data-animate="fadeInUp" data-delay="200">Er zijn geen problemen op de Mac waar we niet al eens een klant mee geholpen hebben.</p>
</div>
</div>
<div class="video-wrap">
<video poster="images/video/intro.jpg" preload="auto" loop autoplay muted>
<source src='images/video/intro.mp4' type='video/mp4' />
<source src='images/video/intro.webm' type='video/webm' />
</video>
<div class="video-overlay" style="background-color: rgba(0,0,0,0.55);"></div>
</div></div>

SSemicolon WebSTAFFApr 16, 2020

Hello,

This is Definitely Possible and already integrated within the Templates. Simply Consider using the following code to include a Youtube Video:


&#x9;

Replace the data-video Attribute with your Youtube URL.

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Ddata0Apr 16, 2020

Thanks for the help so far, I just wanted to reply In private for this one:
I used the code to fix the video slider but my customer makes a big point of the scores on GTMETRIX, now I have some issues with Enable compression for the following resources and hope you have tip how to fix/trick this into the right way.
I have gzip compression checked and its on, so this must be something els?
Hope u reconise this and have tips.

Kind regards, Camiel

Ddata0Apr 16, 2020

my question is simple: how to avoid this compressing problem is its server side active but does display, even when its checked.
Also i see 'video playback' added to this view/list that can be a result of replaceing with youtube slider?

hope any tips are there to fix or avoid this. kind regards, camiel

SSemicolon WebSTAFFApr 16, 2020

Hello,

This is something that is Server related and not the Template or the codes. There could an issue with your Server Configurations which might be causing the issue with gZip Compression. You can consider checking out the Documentation > Start > Optimization Tips Section for suggestions.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard
How to embbed a youtube clip into the Canvas Swiper Slider · Canvas Template Support