Auto Video Palyer
<video autoplay="" loop="" muted="" id="video-background2" class="w-100">
<source src="images/video/preview.mp4" type="video/mp4">
</video>
Custom container
<div class="video-img">
<div class="view-demo">
<img src="images/12.jpg" alt="">
<div class="play-button text-center">
<a href="https://www.youtube.com/watch?v=e6MhFghdQps" class="popup-youtube">
<i class="fa fa-play"></i>
</a>
</div>
</div>
</div>
<script>
var handleMagnificPopup = function(){
if(jQuery('.mfp-gallery').length > 0){
/* magnificPopup function */
jQuery('.mfp-gallery').magnificPopup({
delegate: '.mfp-link',
type: 'image',
tLoading: 'Loading image #%curr%...',
mainClass: 'mfp-img-mobile',
gallery: {
enabled: true,
navigateByImgClick: true,
preload: [0,1] // Will preload 0 - before current, and 1 after the current image
},
image: {
tError: 'The image #%curr% could not be loaded.',
titleSrc: function(item) {
return item.el.attr('title') + '';
}
}
});
/* magnificPopup function end */
}
if(jQuery('.mfp-video').length > 0){
/* magnificPopup for Play video function */
jQuery('.mfp-video').magnificPopup({
type: 'iframe',
iframe: {
markup: ''+
''+
''+
'Some caption'+
''
},
callbacks: {
markupParse: function(template, values, item) {
values.title = item.el.attr('title');
}
}
});
}
</script>
.video-img{
.view-demo{
position: relative;
overflow: hidden;
img{
width: 100%;
border-radius: $radius;
object-fit: cover;
}
&:after{
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width:100%;
background:rgba(84, 124, 175, 0.25);
z-index: 1;
border-radius: $radius;
}
a{
height: 4.375rem;
width: 4.375rem;
display: block;
position: relative;
z-index: 2;
margin: auto;
svg{
path{
fill{
fill: #fff;
}
}
}
}
.play-button{
position: absolute;
top: 50%;
left: 0;
transform: translate(0, -3.125rem);
z-index: 2;
width: 100%;
h4{
font-size: 1.5rem;
color: white;
position: relative;
z-index: 2;
margin-top: 0.625rem;
}
@include respond ('phone'){
svg{
width:3.125rem;
}
h4{
font-size: 1rem;
}
}
}
}
.popup-youtube{
display: inline-block;
height: 70px;
width: 70px;
line-height: 72px;
text-align: center;
font-size: 18px;
border-radius: 50%;
min-width: 70px;
background-color: $white;
color: var(--primary);
i{
color:var(--primary);
}
&:before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
border: 1px solid var(--primary);
-webkit-border-radius: 50%;
-khtml-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 100%;
animation: animationSignal1;
animation-iteration-count: infinite;
animation-duration: 3s;
-webkit-animation: animationSignal1;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 3s;
z-index: -1;
transform: scale(1);
-moz-transform: scale(1);
-webkit-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
-moz-transition: all 0.5;
-o-transition: all 0.5;
-webkit-transition: all 0.5;
-ms-transition: all 0.5;
transition: all 0.5;
}
&:after{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
border: 1px solid var(--primary);
-webkit-border-radius: 100%;
-khtml-border-radius: 100%;
-moz-border-radius: 100%;
-ms-border-radius: 100%;
-o-border-radius: 100%;
border-radius: 100%;
animation: animationSignal2;
animation-iteration-count: infinite;
animation-duration: 3s;
-webkit-animation: animationSignal2;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 3s;
z-index: -1;
transform: scale(1);
-moz-transform: scale(1);
-webkit-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
-moz-transition: all 0.5;
-o-transition: all 0.5;
-webkit-transition: all 0.5;
-ms-transition: all 0.5;
transition: all 0.5;
}
}
@keyframes animationSignal1 {
/*Video Popup*/
0% {
opacity: 0.8;
transform: scale(0.9);
-moz-transform: scale(0.9);
-ms-transform: scale(0.9);
-o-transform: scale(0.9);
-webkit-transform: scale(0.9);
}
100% {
transform: scale(1.5);
-moz-transform: scale(1.5);
-ms-transform: scale(1.5);
-o-transform: scale(1.5);
-webkit-transform: scale(1.5);
opacity: 0;
}
}
@-webkit-keyframes animationSignal1 {
/*Video Popup*/
0% {
//opacity: 0.8;
transform: scale(0.9);
-moz-transform: scale(0.9);
-ms-transform: scale(0.9);
-o-transform: scale(0.9);
-webkit-transform: scale(0.9);
}
100% {
transform: scale(1.5);
-moz-transform: scale(1.5);
-ms-transform: scale(1.5);
-o-transform: scale(1.5);
-webkit-transform: scale(1.5);
opacity: 0;
}
}
@keyframes animationSignal2 {
/*Video Popup*/
0% {
//opacity: 0.8;
transform: scale(0.9);
-moz-transform: scale(0.9);
-webkit-transform: scale(0.9);
-ms-transform: scale(0.9);
-o-transform: scale(0.9);
}
100% {
transform: scale(1.9);
-moz-transform: scale(1.9);
-webkit-transform: scale(1.9);
-ms-transform: scale(1.9);
-o-transform: scale(1.9);
opacity: 0;
}
}
@-webkit-keyframes animationSignal2 {
/*Video Popup*/
0% {
//opacity: 0.8;
transform: scale(0.9);
-moz-transform: scale(0.9);
-webkit-transform: scale(0.9);
-ms-transform: scale(0.9);
-o-transform: scale(0.9);
}
100% {
transform: scale(1.9);
-moz-transform: scale(1.9);
-webkit-transform: scale(1.9);
-ms-transform: scale(1.9);
-o-transform: scale(1.9);
opacity: 0;
}
}
}
Basic Audio
0:00
3:03
<div class="dz-player m-b15" data-src="images/song/song1.mp3">
<button class="dz-play-btn"><span class="dz-play-btnIco"><i class="fa-solid fa-play"></i></span></button>
<button class="dz-play-btn"><span class="dz-play-btnIco"><svg class="svg-inline--fa fa-pause" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="pause" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" data-fa-i2svg=""><path fill="currentColor" d="M48 64C21.5 64 0 85.5 0 112V400c0 26.5 21.5 48 48 48H80c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48H48zm192 0c-26.5 0-48 21.5-48 48V400c0 26.5 21.5 48 48 48h32c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48H240z"></path></svg></span></button>
<div class="dzPlayNum">
<span class="dzPlayCurDuration">0:00</span>
</div>
<div class="dz-player-range">
<span class="under-dz-player-ranger"></span>
<input class="dzPlayRange" type="range" min="0" value="0" step="1" max="183"><span class="change-dz-player-range"></span>
</div>
<div class="dzPlayNum">
<span class="dzPlayDuration">3:03</span>
</div>
<div class="dz-volume-container">
<span class="dzPlayerVolIcon"><i class="fa fa-volume-up"></i></span>
<div class="dz-player-range-volume">
<span class="under-dz-player-ranger"></span>
<input class="dzPlayVol" type="range" min="0" max="1" value="1" step="0.1"><span class="change-dz-player-range"></span>
</div>
</div>
</div>
<script>
$(document).ready(function(){
var musicplayer = function(){
var timeString = (secs) => {
let ss = Math.floor(secs),
hh = Math.floor(ss / 3600),
mm = Math.floor((ss - hh * 3600) / 60);
ss = ss - hh * 3600 - mm * 60;
if (hh > 0) {
mm = mm > 10 ? "0" + mm : mm;
}
ss = ss < 10 ? "0" + ss : ss;
return hh > 0 ? `${hh}:${mm}:${ss}` : `${mm}:${ss}`;
};
function setProgress(elTarget) {
let divisionNumber = elTarget.getAttribute("max") / 100;
let rangeNewWidth = Math.floor(elTarget.value / divisionNumber);
if (rangeNewWidth > 95) {
elTarget.nextSibling.style.width = "95%";
} else {
elTarget.nextSibling.style.width = rangeNewWidth + "%";
}
}
for (let i of document.querySelectorAll(".dz-player")) {
i.audio = new Audio(encodeURI(i.dataset.src));
(i.aPlay = i.querySelector(".dz-play-btn")),
(i.aPlayIco = i.querySelector(".dz-play-btnIco")),
(i.dzPlayCurDuration = i.querySelector(".dzPlayCurDuration")),
(i.dzPlayDuration = i.querySelector(".dzPlayDuration")),
(i.dzPlayRange = i.querySelector(".dzPlayRange")),
(i.dzPlayVol = i.querySelector(".dzPlayVol")),
(i.dzPlayerVolIcon = i.querySelector(".dzPlayerVolIcon"));
i.seeking = false;
i.aPlay.onclick = () => {
if (i.audio.paused) {
i.audio.play();
} else {
i.audio.pause();
}
};
i.audio.onplay = () => (i.aPlayIco.innerHTML = '');
i.audio.onpause = () => (i.aPlayIco.innerHTML = '');
i.audio.onloadstart = () => {
i.dzPlayCurDuration.innerHTML = "Loading";
i.dzPlayDuration.innerHTML = "";
};
i.audio.onloadedmetadata = () => {
i.dzPlayCurDuration.innerHTML = timeString(0);
i.dzPlayDuration.innerHTML = timeString(i.audio.duration);
i.dzPlayRange.max = Math.floor(i.audio.duration);
i.dzPlayRange.oninput = () => (i.seeking = true);
i.dzPlayRange.onchange = () => {
i.audio.currentTime = i.dzPlayRange.value;
if (!i.audio.paused) {
i.audio.play();
}
i.seeking = false;
};
i.audio.ontimeupdate = () => {
if (!i.seeking) {
i.dzPlayRange.value = Math.floor(i.audio.currentTime);
}
i.dzPlayCurDuration.innerHTML = timeString(i.audio.currentTime);
let divisionNumber = i.dzPlayRange.getAttribute("max") / 100;
let rangeNewWidth = Math.floor(i.dzPlayRange.value / divisionNumber);
if (rangeNewWidth > 95) {
i.dzPlayRange.nextSibling.style.width = "95%";
} else {
i.dzPlayRange.nextSibling.style.width = rangeNewWidth + "%";
}
};
};
i.dzPlayerVolIcon.onclick = () => {
i.audio.volume = i.audio.volume == 0 ? 1 : 0;
i.dzPlayVol.value = i.audio.volume;
i.dzPlayerVolIcon.innerHTML =
i.dzPlayVol.value == 0
? ''
: '';
if (i.dzPlayVol.value == 0) {
i.dzPlayVol.nextSibling.style.width = "0%";
} else {
i.dzPlayVol.nextSibling.style.width = "95%";
}
};
i.dzPlayVol.onchange = () => {
i.audio.volume = i.dzPlayVol.value;
i.dzPlayerVolIcon.innerHTML =
i.dzPlayVol.value == 0
? ''
: '';
};
i.audio.oncanplaythrough = () => {
i.aPlay.disabled = false;
i.dzPlayVol.disabled = false;
i.dzPlayRange.disabled = false;
};
i.audio.onwaiting = () => {
i.aPlay.disabled = true;
i.dzPlayVol.disabled = true;
i.dzPlayRange.disabled = true;
};
i.dzPlayRange.addEventListener("input", function () {
setProgress(this);
});
i.dzPlayVol.addEventListener("input", function () {
setProgress(this);
});
}
}
var musiccontrolbutton = function(){
$(document).ready(function() {
var $tracks = $(".track");
var $controlBtns = $(".play-pause");
var activeIndex = -1;
function playPause(index) {
if (activeIndex === index) {
var $track = $tracks[index];
var $controlBtn = $controlBtns.eq(index);
if ($track.paused) {
$track.play();
$controlBtn.removeClass("play").addClass("pause");
} else {
$track.pause();
$controlBtn.removeClass("pause").addClass("play");
}
} else {
if (activeIndex !== -1) {
var $activeTrack = $tracks[activeIndex];
var $activeControlBtn = $controlBtns.eq(activeIndex);
$activeTrack.pause();
$activeControlBtn.removeClass("pause").addClass("play");
}
var $track = $tracks[index];
var $controlBtn = $controlBtns.eq(index);
$track.play();
$controlBtn.removeClass("play").addClass("pause");
activeIndex = index;
}
}
$controlBtns.each(function(index) {
$(this).on("click", function() {
playPause(index);
});
});
$tracks.on("ended", function() {
var index = $tracks.index(this);
$controlBtns.eq(index).removeClass("pause").addClass("play");
activeIndex = -1;
});
});
}
</script>
.dz-player {
display: flex;
align-items: center;
flex-wrap: wrap;
width: 100%;
padding: 19px 25px;
background: var(--primary);
gap: 0.3rem;
border-radius: $radius;
@include respond('tab-land'){
padding:15px;
}
@include respond('phone'){
padding: 20px 15px;
margin-bottom: 10px;
gap:0;
}
.dz-play-btn {
padding: 0;
margin: 0;
background: 0;
border: 0;
cursor: pointer;
line-height:0;
.dz-play-btnIco{
color:#fff;
i{
color: #fff;
font-size: 18px;
}
}
}
.dzPlayNum {
font-size: 14px;
color: #cbcbcb;
margin: 0 10px;
width:30px;
@include respond('phone'){
margin:0 5px;
}
}
}
.dz-player input[type="range"]{
appearance: none;
border: none;
outline: none;
box-shadow: none;
width: 500px;
padding: 0;
margin: 0;
background: 0;
height: 10px;
}
.dz-player-range{
width: 65%;
@include respond('tab-land'){
width:55%;
}
@include respond('phone'){
width:35%;
}
}
.dz-player-range,
.dz-player-range-volume {
position: relative;
display: flex;
align-items: center;
}
.dz-player-range input,
.dz-player-range-volume input {
position: relative;
z-index: 1;
}
.dz-player-range .change-dz-player-range,
.dz-player-range-volume .change-dz-player-range {
position: absolute;
left: 0;
top: 0;
height: 10px;
width: 0px;
background: var(--secondary);
}
.dz-player-range-volume .change-dz-player-range {
height: 10px;
width: 95%;
}
.under-dz-player-ranger {
position: absolute;
left: 0;
top: 0;
height: 10px;
width: 100%;
background: #fff;
}
.dz-player-range-volume .under-dz-player-ranger {
height: 10px;
}
.dz-player input[type="range"]::-webkit-slider-thumb{
appearance: none;
}
.dz-player input[type="range"]::-webkit-slider-runnable-track{
background: transparent;
height: 6px;
border-radius: 10px;
}
.dz-player input[type="range"]::-webkit-slider-thumb{
width: 16px;
height: 16px;
border-radius: 50%;
border: 0;
background: #fff;
position: relative;
cursor: pointer;
margin-top: -5px;
}
.dz-player input[type="range"]::-moz-range-thumb{
width: 16px;
height: 16px;
border-radius: 50%;
border: 0;
background: #fff;
position: relative;
cursor: pointer;
margin-top: -5px;
}
.dzPlayerVolIcon {
margin: 0 10px;
cursor: pointer;
i{
color:#fff;
}
}
input.dzPlayVol {
width: 65px !important;
@include respond('phone'){
width:50px !important;
}
}
.dzPlayVol::-webkit-slider-runnable-track {
height: 10px !important;
}
.dzPlayVol::-webkit-slider-thumb {
margin-top: -3px !important;
}
.dzPlayVol::-moz-range-thumb {
margin-top: -3px !important;
}
.dz-volume-container {
display: flex;
align-items: center;
}