Video Player
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at ullamcorper mauris, vitae imperdiet tortor. Cras aliquet gravida lacus eu auctor
Fully Customise Video Players
Using WoodPecker® you can fully customise the look behaviour of any video player. So be it
HTML5 or YouTube we've covered them for you.
<video class = "wdpk-video" poster = "/assets/images/video-poster.jpg" id = "html5-player"
playsinline controls>
<source src = "/assets/video/video.mp4" type = "video/mp4" />
<!-- Captions are optional -->
<track kind = "captions" label = "English captions" src = "/assets/video/video-captions.vtt"
srclang = "en"
default />
</video>
/** No Chnages To Scss Variables **/
jQuery(document).ready(function ()
{
if (jQuery(".wdpk-video").length !== 0)
{
let obj = {
selectorID: 'html5-player',
captions: {
active: true,
language: 'en',
update: false
},
};
require(["app/shortcodes/wdpkPlayer"], function (e)
{
e.publicCall(obj);
});
}
});
Works With YouTube Videos As Well
Using WoodPecker® you can fully customise the look behaviour of any video player. So be it
HTML5 or YouTube we've covered them for you.
<div class = "wdpk-plyr-video-embed" id = "wdpk-youtube-player">
<iframe
src = "https://www.youtube.com/embed/bTqVqk7FSmY?origin=https://plyr.io&iv_load_policy=3&modestbranding=1&playsinline=1&showinfo=0&rel=0&enablejsapi=1"
allowfullscreen
allowtransparency
allow = "autoplay"
></iframe>
</div>
/** No Chnages To Scss Variables **/
jQuery(document).ready(function ()
{
if (jQuery(".wdpk-video").length !== 0)
{
let obj2 = {
selectorID: 'wdpk-youtube-player',
captions: {
active: true,
language: 'en',
update: false
},
};
require(["app/shortcodes/wdpkPlayer"], function (e)
{
e.publicCall(obj2);
});
}
});
