Bạn cần nhúng video vimeo vào website mà cần custom lại phần play, pause, sound thì bạn hãy thao khảo bài viết này nhé!
Đoạn code bao gồm chức năng:
- Lazyload video: chỉ tải video khi click vào hình, giúp tăng tốc độ website
- Điều chỉnh bật và tắt video
- Tắt trình phát video mặc định của vimeo
- Điều chỉnh âm thanh
Demo:
HTML
<div class="video-vimeo-container is-lazy" data-video-id="12860646">
<div class="lazy-video-wrap">
<img loading="lazy" decoding="async" width="2114" height="1194" src="https://i.vimeocdn.com/video/72897815-cb68ca670d7aa96d3651280f9783aa13582a7dd4eaefdd5a96baeb65dfe9fa5e-d_1024x575" class="attachment-full size-full" alt="article-img-banner">
<button class="lazy-load-btn">
<span class="play">
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#ffffff"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <circle opacity="0.5" cx="12" cy="12" r="10" stroke="#ffffff" stroke-width="1.5"></circle> <path d="M13.8876 9.9348C14.9625 10.8117 15.5 11.2501 15.5 12C15.5 12.7499 14.9625 13.1883 13.8876 14.0652C13.5909 14.3073 13.2966 14.5352 13.0261 14.7251C12.7888 14.8917 12.5201 15.064 12.2419 15.2332C11.1695 15.8853 10.6333 16.2114 10.1524 15.8504C9.6715 15.4894 9.62779 14.7336 9.54038 13.2222C9.51566 12.7947 9.5 12.3757 9.5 12C9.5 11.6243 9.51566 11.2053 9.54038 10.7778C9.62779 9.26636 9.6715 8.51061 10.1524 8.1496C10.6333 7.78859 11.1695 8.11466 12.2419 8.76679C12.5201 8.93597 12.7888 9.10831 13.0261 9.27492C13.2966 9.46483 13.5909 9.69274 13.8876 9.9348Z" stroke="#ffffff" stroke-width="1.5"></path> </g></svg>
</span>
</button>
</div>
<button class="play-pause-btn">
<span class="play">
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#ffffff"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <circle opacity="0.5" cx="12" cy="12" r="10" stroke="#ffffff" stroke-width="1.5"></circle> <path d="M13.8876 9.9348C14.9625 10.8117 15.5 11.2501 15.5 12C15.5 12.7499 14.9625 13.1883 13.8876 14.0652C13.5909 14.3073 13.2966 14.5352 13.0261 14.7251C12.7888 14.8917 12.5201 15.064 12.2419 15.2332C11.1695 15.8853 10.6333 16.2114 10.1524 15.8504C9.6715 15.4894 9.62779 14.7336 9.54038 13.2222C9.51566 12.7947 9.5 12.3757 9.5 12C9.5 11.6243 9.51566 11.2053 9.54038 10.7778C9.62779 9.26636 9.6715 8.51061 10.1524 8.1496C10.6333 7.78859 11.1695 8.11466 12.2419 8.76679C12.5201 8.93597 12.7888 9.10831 13.0261 9.27492C13.2966 9.46483 13.5909 9.69274 13.8876 9.9348Z" stroke="#ffffff" stroke-width="1.5"></path> </g></svg>
</span>
<span class="pause">
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <circle opacity="0.5" cx="12" cy="12" r="10" stroke="#ffffff" stroke-width="1.5"></circle> <path d="M8 9.5C8 9.03406 8 8.80109 8.07612 8.61732C8.17761 8.37229 8.37229 8.17761 8.61732 8.07612C8.80109 8 9.03406 8 9.5 8C9.96594 8 10.1989 8 10.3827 8.07612C10.6277 8.17761 10.8224 8.37229 10.9239 8.61732C11 8.80109 11 9.03406 11 9.5V14.5C11 14.9659 11 15.1989 10.9239 15.3827C10.8224 15.6277 10.6277 15.8224 10.3827 15.9239C10.1989 16 9.96594 16 9.5 16C9.03406 16 8.80109 16 8.61732 15.9239C8.37229 15.8224 8.17761 15.6277 8.07612 15.3827C8 15.1989 8 14.9659 8 14.5V9.5Z" stroke="#ffffff" stroke-width="1.5"></path> <path d="M13 9.5C13 9.03406 13 8.80109 13.0761 8.61732C13.1776 8.37229 13.3723 8.17761 13.6173 8.07612C13.8011 8 14.0341 8 14.5 8C14.9659 8 15.1989 8 15.3827 8.07612C15.6277 8.17761 15.8224 8.37229 15.9239 8.61732C16 8.80109 16 9.03406 16 9.5V14.5C16 14.9659 16 15.1989 15.9239 15.3827C15.8224 15.6277 15.6277 15.8224 15.3827 15.9239C15.1989 16 14.9659 16 14.5 16C14.0341 16 13.8011 16 13.6173 15.9239C13.3723 15.8224 13.1776 15.6277 13.0761 15.3827C13 15.1989 13 14.9659 13 14.5V9.5Z" stroke="#ffffff" stroke-width="1.5"></path> </g></svg>
</span>
</button>
<button class="mute-unmute-btn">
<span class="unmute">
<svg xmlns="http://www.w3.org/2000/svg" fill="#000000" width="800px" height="800px" viewBox="0 0 1920 1920">
<path d="M1129.432 113v1694.148H936.638l-451.773-451.773h-315.45C76.01 1355.375 0 1279.365 0 1185.96V734.187c0-93.404 76.01-169.414 169.415-169.414h315.45L936.638 113h192.794Zm-112.943 112.943h-33.093l-418.68 418.68v630.901l418.68 418.68h33.093V225.944Zm655.488 135.114C1831.904 521.097 1920 733.77 1920 960.107c0 226.226-88.096 438.898-248.023 598.938l-79.851-79.85c138.694-138.695 214.93-323.018 214.93-519.087 0-196.183-76.236-380.506-214.93-519.2Zm-239.112 239.745c95.663 97.018 148.294 224.644 148.294 359.272s-52.631 262.254-148.294 359.272l-80.529-79.286c74.769-75.785 115.88-175.175 115.88-279.986 0-104.811-41.111-204.201-115.88-279.986Zm-981.092 76.914H169.415c-31.06 0-56.472 25.3-56.472 56.471v451.773c0 31.172 25.412 56.472 56.472 56.472h282.358V677.716Z" fill-rule="evenodd"></path>
</svg>
</span>
<span class="mute">
<svg xmlns="http://www.w3.org/2000/svg" fill="#000000" width="800px" height="800px" viewBox="0 0 1920 1920">
<path d="M1129.432 113v1694.148H936.638l-451.773-451.773h-315.45c-92.47 0-167.893-74.498-169.392-166.618L0 1185.96V734.187c0-92.47 74.498-167.892 166.618-169.392l2.797-.022h315.45L936.638 113h192.794Zm-112.943 112.943h-33.093l-418.68 418.68v630.901l418.68 418.68h33.093V225.944Zm823.662 411.78L1920 717.571l-242.372 242.372L1920 1202.428l-79.85 79.85-242.484-242.372-242.372 242.372-79.85-79.85 242.372-242.484-242.371-242.372 79.85-79.85 242.37 242.372 242.486-242.372ZM451.773 677.715H169.415c-30.749 0-55.963 24.796-56.464 55.538l-.008.933v451.773c0 30.86 24.907 55.965 55.542 56.464l.93.008h282.358V677.716Z" fill-rule="evenodd"></path>
</svg>
</span>
</button>
</div>CSS
.video-vimeo-container {
position: relative;
aspect-ratio: 16/9;
}
.video-vimeo-container iframe,
.video-vimeo-container img {
position: absolute;
z-index: 3;
width: 100%;
height: 100%;
top: 0;
left: 0;
object-fit: cover;
}
.video-vimeo-container img {
filter: brightness(0.5);
}
.video-vimeo-container iframe {
background-color: #000;
}
.video-vimeo-container .play-pause-btn,
.video-vimeo-container .lazy-load-btn {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 4;
background-color: transparent;
border: 0;
box-shadow: none;
cursor: pointer;
}
.video-vimeo-container .play-pause-btn > span,
.video-vimeo-container .lazy-load-btn > span {
width: 100px;
height: 100px;
}
.video-vimeo-container .play-pause-btn > span svg,
.video-vimeo-container .lazy-load-btn > span svg {
width: 100%;
height: 100%;
}
.video-vimeo-container .mute-unmute-btn {
position: absolute;
z-index: 5;
width: 50px;
height: 50px;
bottom: 20px;
left: 20px;
background-color: transparent;
border: 0;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
cursor: pointer;
}
.video-vimeo-container .mute-unmute-btn > span {
width: 50px;
height: 50px;
display: block;
background: #ffffff75;
padding: 10px;
box-sizing: border-box;
border-radius: 50px;
}
.video-vimeo-container .mute-unmute-btn > span svg {
width: 100%;
height: 100%;
fill: #fff !important;
}
.video-vimeo-container .mute-unmute-btn > span.mute {
display: none;
}
.video-vimeo-container .mute-unmute-btn > span.unmute {
display: block;
}
.video-vimeo-container.is-lazy .mute-unmute-btn,
.video-vimeo-container.is-lazy .play-pause-btn {
display: none;
}
.video-vimeo-container.is-lazy .mute-unmute-btn span,
.video-vimeo-container.is-lazy .play-pause-btn span {
display: none;
}
.video-vimeo-container.loaded .play-pause-btn {
display: flex;
}
.video-vimeo-container.loaded .play-pause-btn > span {
background-color: #12121233;
border-radius: 50%;
}
.video-vimeo-container.loaded .play-pause-btn > span {
display: none;
padding: 5px;
box-sizing: border-box;
}
.video-vimeo-container.is-play .mute-unmute-btn {
display: block;
}
.video-vimeo-container.is-play:hover .mute-unmute-btn {
opacity: 1;
}
@media screen and (max-width: 767px) {
.video-vimeo-container .play-pause-btn > span,
.video-vimeo-container .lazy-load-btn > span {
width: 65px;
height: 65px;
}
.video-vimeo-container .mute-unmute-btn {
left: 2px;
bottom: 2px;
}
.video-vimeo-container .mute-unmute-btn > span {
width: 35px;
height: 35px;
padding: 8px;
}
}
JS
jQuery(document).ready(function($){
// Function to handle lazy load button click
$('.lazy-load-btn').on('click', function() {
let container = $(this).closest('.video-vimeo-container');
let videoId = container.data('video-id');
let iframe = $('<iframe class="vimeo-video" src="https://player.vimeo.com/video/' + videoId + '?api=1&player_id=vimeo-video&controls=0&autoplay=1&loop=1&autopause=0&quality=1080p" width="100%" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>');
container.prepend(iframe);
container.removeClass('is-lazy');
container.addClass('is-play loaded');
$(this).parents('.lazy-video-wrap').remove(); // Remove the lazy load button after loading the video
});
// Function to handle play/pause and mute/unmute buttons
$('body').on('click', '.play-pause-btn, .mute-unmute-btn', function() {
let btn = $(this),
container = btn.closest('.video-vimeo-container'),
iframe = container.find('iframe'),
player = new Vimeo.Player(iframe[0]);
if( $(this).hasClass('play-pause-btn') ){
player.getPaused().then(function(paused) {
if (paused) {
player.play().then(function() {
btn.find('.play').css('display', 'none');
btn.find('.pause').css('display', 'block');
container.removeClass('is-pause').addClass('is-play');
setInterval(() => {
btn.find('.pause').css('display', 'none');
}, 100);
}).catch(function(error) {
console.error('Unable to play video: ', error);
});
} else {
player.pause().then(function() {
btn.find('.play').css('display', 'block');
btn.find('.pause').css('display', 'none');
container.removeClass('is-play').addClass('is-pause');
}).catch(function(error) {
console.error('Unable to pause video: ', error);
});
}
}).catch(function(error) {
console.error('Unable to get pause state: ', error);
});
}else{
player.getVolume().then(function(volume) {
if (volume > 0) {
player.setVolume(0).then(function() {
btn.find('.unmute').css('display', 'none');
btn.find('.mute').css('display', 'block');
}).catch(function(error) {
console.error('Unable to mute video: ', error);
});
} else {
player.setVolume(1).then(function() {
btn.find('.mute').css('display', 'none');
btn.find('.unmute').css('display', 'block');
}).catch(function(error) {
console.error('Unable to unmute video: ', error);
});
}
}).catch(function(error) {
console.error('Unable to get volume state: ', error);
});
}
});
})Một bài lưu ý là bạn cần phải nhúng thêm thư viện quản lý video vimeo sau: https://player.vimeo.com/api/player.js