Video Player
Examples of video player components.
Video player #1
HTML:
<div id="video" class="u-video-player">
<img class="img-fluid u-video-player__preview" src="../assets/img/900x450/img2.jpg" alt="Image">
<a class="js-classes-toggle u-video-player__btn u-video-player__centered" href="javascript:;"
data-target="#video"
data-classes="u-video-player__played">
<span class="u-video-player__icon u-video-player__icon--lg text-primary">
<span class="fa fa-play u-video-player__icon-inner"></span>
</span>
</a>
<div class="embed-responsive embed-responsive-16by9">
<iframe id="youTubeVideo" class="embed-responsive-item"
data-src="//www.youtube.com/embed/0qisGSwZym4?autoplay=1&showinfo=0&rel=0">
</iframe>
</div>
</div>
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="assets/js/helpers/hs.video-player.js"></script>
<!-- JS Plugins Init. -->
<script>
$(function () {
// initialization of slick carousels
$.HSCore.components.HSVideoPlayer.init('.js-classes-toggle', {
oneClick: function() {
$('#youTubeVideo').attr('src', $('#youTubeVideo').data('src'));
}
});
});
</script>
Video player #2
HTML:
<div class="position-relative">
<div id="video2" class="u-video-player">
<img class="img-fluid u-video-player__preview" src="../assets/img/900x450/img5.jpg" alt="Image">
<a class="js-classes-toggle-2 u-video-player__btn u-video-player__centered" href="javascript:;"
data-target="#video2"
data-classes="u-video-player__played">
<span class="u-video-player__icon u-video-player__icon--lg text-primary">
<span class="fa fa-play u-video-player__icon-inner"></span>
</span>
</a>
<div class="embed-responsive embed-responsive-16by9">
<iframe id="vimeoVideo" class="embed-responsive-item"
data-src="//www.youtube.com/embed/0qisGSwZym4?autoplay=1&showinfo=0&rel=0">
</iframe>
</div>
</div>
<figure class="w-100 u-content-centered z-index-minus-1">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1109.8 797.1" style="enable-background:new 0 0 1109.8 797.1;" xml:space="preserve">
<path class="u-fill-primary" opacity=".1" d="M105.1,267.1C35.5,331.5-3.5,423,0.3,517.7c5.8,145.3,110.7,314.2,588,273.1c753-64.7,481.3-358.3,440.4-398.3
c-4-3.9-7.9-7.9-11.7-12L761.9,104.8C639.4-27.6,432.5-35.6,299.9,87L105.1,267.1z"/>
</svg>
</figure>
</div>
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="assets/js/helpers/hs.video-player.js"></script>
<!-- JS Plugins Init. -->
<script>
$(function () {
// initialization of slick carousels
$.HSCore.components.HSVideoPlayer.init('.js-classes-toggle', {
oneClick: function() {
$('#vimeoVideo').attr('src', $('#vimeoVideo').data('src'));
}
});
});
</script>
Video player #3
HTML:
<div class="position-relative">
<div class="u-bg-img-hero text-center u-space-4" style="background-image: url(../assets/img/1920x800/img1.jpg);">
<a class="js-fancybox u-media-player mb-4" href="javascript:;"
data-src="//vimeo.com/167434033"
data-speed="700"
data-animate-in="zoomIn"
data-animate-out="zoomOut"
data-caption="Front - Responsive Website Template">
<span class="u-media-player__icon u-media-player__icon--lg">
<span class="fa fa-play u-media-player__icon-inner"></span>
</span>
</a>
<br>
<h4 class="d-inline-block text-white mb-0">Watch Front Video</h4>
</div>
<figure class="position-absolute-bottom-0">
<svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="100%" height="140px" viewBox="20 -20 300 100" style="margin-bottom: -8px;" xml:space="preserve">
<path class="u-fill-white" opacity="0.4" d="M30.913,43.944c0,0,42.911-34.464,87.51-14.191c77.31,35.14,113.304-1.952,146.638-4.729
c48.654-4.056,69.94,16.218,69.94,16.218v54.396H30.913V43.944z" />
<path class="u-fill-white" opacity="0.4" d="M-35.667,44.628c0,0,42.91-34.463,87.51-14.191c77.31,35.141,113.304-1.952,146.639-4.729
c48.653-4.055,69.939,16.218,69.939,16.218v54.396H-35.667V44.628z" />
<path class="u-fill-white" opacity="0" d="M43.415,98.342c0,0,48.283-68.927,109.133-68.927c65.886,0,97.983,67.914,97.983,67.914v3.716
H42.401L43.415,98.342z" />
<path class="u-fill-white" d="M-34.667,62.998c0,0,56-45.667,120.316-27.839C167.484,57.842,197,41.332,232.286,30.428
c53.07-16.399,104.047,36.903,104.047,36.903l1.333,36.667l-372-2.954L-34.667,62.998z" />
</svg>
</figure>
</div>
CSS library:
<link rel="stylesheet" href="assets/vendor/fancybox/jquery.fancybox.css">
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="assets/vendor/fancybox/jquery.fancybox.min.js"></script>
<!-- JS Implementing Plugins -->
<script src="assets/js/components/hs.fancybox.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of popups
$.HSCore.components.HSPopup.init('.js-fancybox');
});
</script>
Video player #4
HTML:
<div class="position-relative">
<div class="u-bg-img-hero text-center u-space-4" style="background-image: url(../assets/img/1920x800/img4.jpg);">
<a class="js-fancybox u-media-player mb-4" href="javascript:;"
data-src="//vimeo.com/167434033"
data-speed="700"
data-animate-in="zoomIn"
data-animate-out="zoomOut"
data-caption="Front - Responsive Website Template">
<span class="u-media-player__icon u-media-player__icon--lg">
<span class="fa fa-play u-media-player__icon-inner"></span>
</span>
</a>
<br>
<h4 class="d-inline-block text-white mb-0">Watch Front Video</h4>
</div>
<figure class="w-100 position-absolute-top-0">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1920 125.7" style="margin-top: -8px; margin-bottom: 0; enable-background:new 0 0 1920 125.7;" xml:space="preserve">
<path class="u-fill-white" d="M1920,0v44.2c0,0-451,63.8-960,6.3S0,125.7,0,125.7L0,0L1920,0z"/>
</svg>
</figure>
<figure class="w-100 position-absolute-bottom-0">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1920.5 248.5" style="margin-bottom: -8px; enable-background:new 0 0 1920.5 248.5;" xml:space="preserve">
<path class="u-fill-white" d="M0.5,248.5v-44.2c0,0,451-63.8,960-6.3s960-75.1,960-75.1v125.7H0.5z"/>
</svg>
</figure>
</div>
CSS library:
<link rel="stylesheet" href="assets/vendor/fancybox/jquery.fancybox.css">
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="assets/vendor/fancybox/jquery.fancybox.min.js"></script>
<!-- JS Implementing Plugins -->
<script src="assets/js/components/hs.fancybox.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of popups
$.HSCore.components.HSPopup.init('.js-fancybox');
});
</script>
Video player #5
HTML:
<a class="js-fancybox u-media-player u-media-player--centered" href="javascript:;"
data-src="//vimeo.com/167434033"
data-speed="700"
data-animate-in="zoomIn"
data-animate-out="zoomOut"
data-caption="Front - Responsive Website Template">
<span class="u-media-player__icon u-media-player__icon--xl text-primary">
<span class="fa fa-play u-media-player__icon-inner"></span>
</span>
</a>
<figure>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 614.8 747.7" style="enable-background:new 0 0 614.8 747.7;" xml:space="preserve">
<path class="u-fill-primary" opacity=".05" d="M186.9,138.9C125.8,144.5,69.7,176,34.4,226c-54.3,76.8-67.1,204.7,193.8,371.7c411.5,263.5,387.9,6,382.7-30.6
c-0.5-3.6-0.9-7.2-1.3-10.7l-22.1-241.9C576.8,198.3,474,112.7,357.7,123.3L186.9,138.9z"/>
<g>
<defs>
<path id="mockup1" d="M168.6,729.7L168.6,729.7c135.8,53,290.2-14.8,343.2-150.6l85-217.9C649.8,225.4,582,71,446.2,18l0,0
C310.4-34.9,156,32.8,103,168.6L18,386.5C-34.9,522.3,32.8,676.7,168.6,729.7z"/>
</defs>
<clipPath id="mockup2">
<use xlink:href="#mockup1" style="overflow:visible;"/>
</clipPath>
<g style="clip-path:url(#mockup2);">
<!-- Apply your (615px width to 750px height) image here -->
<image style="overflow:visible;" width="615" height="750" xlink:href="../assets/img/615x750/img3.jpg" transform="matrix(1 0 0 1 -0.1366 -0.9532)"></image>
</g>
</g>
<circle class="u-fill-danger" cx="126.3" cy="693.8" r="16.3"/>
<circle class="u-fill-success" cx="132.9" cy="632.6" r="10.6"/>
<circle class="u-fill-primary" cx="77" cy="655.9" r="21.6"/>
<circle class="u-fill-warning" cx="38.8" cy="708.1" r="3.9"/>
</svg>
</figure>
CSS library:
<link rel="stylesheet" href="assets/vendor/fancybox/jquery.fancybox.css">
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="assets/vendor/fancybox/jquery.fancybox.min.js"></script>
<!-- JS Implementing Plugins -->
<script src="assets/js/components/hs.fancybox.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of popups
$.HSCore.components.HSPopup.init('.js-fancybox');
});
</script>