How to support Youtube and Vimeo video on Equinox, Ascend and Elevate themes
Setup the following guides below to support youtube and vimeo video on Equinox, Ascend and Elevate themes.
Steps for adding the support function
Step 1 Updating theme files
In scripts.js, find the openVideoPopup and getVideoItems functions and update it with the codes below
let openVideoPopup = (items, index = 0) => {
const blockedMessage = '[Video Popup] Autoplay with sound was blocked — playing muted instead.';
$.aiosPopup.open({
...
callbacks: {
...
change: function () {
// video element
let player = this.content.find(`.${cls}__video`);
// skip if not found
if (player.length < 1) return;
if (player.hasClass(`${cls}__video--is-youtube`)) {
player.find('iframe').on('load', function () {
try {
this?.contentWindow?.postMessage(
JSON.stringify({ event: "command", func: "playVideo", args: [] }),
"*"
);
} catch (e) {
console.warn(blockedMessage);
this?.contentWindow?.postMessage(
JSON.stringify({ event: "command", func: "mute" }),
"*"
);
this?.contentWindow?.postMessage(
JSON.stringify({ event: "command", func: "playVideo", args: [] }),
"*"
);
}
});
}
else {
// init plyr
const plyr = new Plyr(player, {
controls: [
'play',
'fast-forward',
'progress',
'current-time',
'duration',
'mute',
'volume',
'fullscreen',
],
fullscreen: {
enabled: true,
iosNative: true,
},
ratio: '16:9',
});
// play after initialize
plyr.play().catch(() => {
console.warn(blockedMessage);
plyr.muted = true;
plyr.play();
});
}
},
}
}, index);
};
let getVideoItems = () => {
// create video items if doesn't exist
if (w.videoItems === undefined) {
w.videoItems = [];
// regex for youtube and vimeo
const youtubeRegex = /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/(?:watch\?v=|embed\/)|youtu\.be\/)([a-zA-Z0-9_-]{11})/;
const vimeoRegex = /(?:https?:\/\/)?(?:www\.)?(?:vimeo\.com\/|player\.vimeo\.com\/video\/)(\d+)/;
$('[data-video]').each((i, v) => {
let $this = $(v);
let type = $this.attr('data-type');
let index = parseInt($this.closest('.swiper-slide').attr('data-swiper-slide-index'));
let videoHtml = '';
// create video items
// base on link and type
if (type == 'url') {
// url (mostly embedded)
// check if youtube link
if (youtubeRegex.test($this.attr('data-video'))) {
videoHtml = `
<div class="${cls}__video ${cls}__video--is-youtube">
<iframe width="560" height="315" src="https://www.youtube.com/embed/${youtubeRegex.exec($this.attr('data-video'))[1]}?enablejsapi=1&origin=${w.location.origin}&autoplay=1" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>
`;
}
// check if vimeo link
if (vimeoRegex.test($this.attr('data-video'))) {
videoHtml = `
<div class="${cls}__video ${cls}__video--is-vimeo" data-plyr-provider="vimeo" data-plyr-embed-id="${vimeoRegex.exec($this.attr('data-video'))[1]}"></div>
`;
}
}
else {
// mp4 (default)
videoHtml = `
<video class="${cls}__video" playsinline controls data-poster="${$this.find('img').attr('data-aios-lazy-src')}">
<source src="${$this.attr('data-video')}" />
</video>
`;
}
w.videoItems[index] = {
src: `
<div class="${cls}__item">
${videoHtml}
<div class="${cls}__name">${$this.attr('data-name')}</div>
</div>
`,
type: 'inline',
};
});
}
return w.videoItems;
};Step 2 Adding YouTube Styles
In homepage.scss, find the testimonial video popup class and update it with the codes below
.hpTestimonialsPopup {
...
&__video {
...
&--is-youtube {
height: 100%;
aspect-ratio: 16/9;
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
}
}.fttestimonialspopup {
...
&__video {
...
&--is-youtube {
height: 100%;
aspect-ratio: 16/9;
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
}
}Step 3 Adding Attribute
In WordPress Dashboard > Appearance > Widgets, find the widget that contains your video testimonials section
and add the attribute below after the data-video attribute
data-type="{{testimonial_video_type}}"Example Usage:
<div class="hpTestimonialsVideo__lists swiper">
<div class="swiper-wrapper">
[aios_testimonials with_video_only="yes"]
<div class="swiper-slide">
<div class="hpTestimonialsVideo__list" role="button" aria-pressed="false" data-video="{{testimonial_video_url}}" data-type="{{testimonial_video_type}}" data-name="{{testimonial_title}}">
<div class="hpTestimonialsVideo__list--image">
<canvas width="1040" height="584.85"></canvas>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" data-aios-lazy-src="{{testimonial_video_placeholder}}" width="1040" height="584.85" alt="video image placeholder" class="aios-lazyload">
</div>
<div class="hpTestimonialsVideo__list--name">
{{testimonial_title}}
</div>
</div>
</div>
[/aios_testimonials]
</div>
</div>After doing the steps above, the last step that you need is to update AIOS Testimonials plugin to 1.5.7 or latest
AIOS Testimonials Notice
When using a YouTube link for your testimonials, make sure to set its Link Type to URL (YouTube, Vimeo).
YouTube Playback Notice We still use Plyr.io for most videos, but for YouTube links we now use YouTube’s built-in player instead. This change is due to browser autoplay policies and occasional playback issues when using Plyr.io with YouTube.
Important: Most modern browsers don’t allow YouTube videos to autoplay with sound to avoid unexpected noise. If that happens, the video will start muted — just click the sound icon to unmute it.