<style>
.my_video div.tn-atom__html{
width: inherit;
height: inherit;
-webkit-clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
-ms-clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
}
.video_mute {
filter: grayscale(1) opacity(0.8);
transform: scale(0.8);
transition: transform 0.3s linear;
cursor:pointer;
}
.video_mute_off{
filter: grayscale(0) opacity(1);
transform: scale(1);
}
.video_mute_off .tn-atom{
filter: grayscale(0) opacity(1);
transform: scale(1);
animation: spin-btn 3s infinite linear;
}
@keyframes spin-btn {
0% {transform: rotate(0deg) }
100% {transform: rotate(360deg) }
}
</style>
<script>
$( document ).ready(function() {
let zeroVideo=document.getElementById('videozero');
$('.video_mute').click(function() {
zeroVideo.volume=0.6;
$(this).toggleClass('video_mute_off');
if($(zeroVideo).prop('muted')){
$(zeroVideo).prop('muted', false);
}else{
$(zeroVideo).prop('muted', true);
};
});
});
</script>