Một trang web đẹp, nhiều tiện ích sẽ thu hút được nhiều lượt truy cập và đây chính là điều mà bất cứ nhà phát triển web nào cũng hướng tới.
Hôm nay, Code Pro sẽ chia sẻ source code mini music box (hộp phát nhạc mini) giúp website của các bạn trở nên sinh động và hấp dẫn hơn.
Code này hoạt động tốt với video youtube dạng embed (mã nhúng). Các link mp3, mp4 hoặc avi,... vẫn có thể hoạt động, tuy nhiên bạn cần chỉnh lại một chút CSS để nó hoàn chỉnh hơn!
Code mini music box
Bước 1: Copy toàn bộ code dưới đây:
<!-- start codepro music box -->
<div class='codepro-music-box'>
<button class='codepro-music-box-toggle-btn'>
<a title='Play music'><i class='fa fa-music'></i></a>
</button>
<div class='codepro-music-holder'>
<iframe allow='autoplay;encrypted-media' allowfullscreen='' frameborder='0' height='auto' src='https://www.youtube.com/embed/Xh0YQp9odv4' width='auto'></iframe>
</div>
</div>
<style>
.codepro-music-box{position:fixed;width:300px;height:160px;z-index:120;bottom:30px;left:30px}
.codepro-music-box a{color:#fff}
@media (max-width: 991px) {.codepro-music-box{width:250px;height:120px;left:auto;left:30px}}
.codepro-music-box .codepro-music-holder{width:100%;height:100%;border:2px solid #eee;position:absolute;left:0;top:-30px;visibility:hidden;opacity:0;-webkit-transition:all .5s ease-out;-o-transition:all .5s ease-out;transition:all .5s ease-out}
.codepro-music-box .codepro-music-holder iframe{width:100%;height:100%}
.codepro-music-box button{background:rgba(0,0,0,0.1);width:40px;height:40px;line-height:0;font-size:18px;font-size:1rem;color:#fff;border:1px solid #e6e6e6;outline:0;padding:0;margin:0;position:absolute;left:0;bottom:0;-webkit-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;-ms-border-radius:50%;border-radius:50%}
@media (max-width: 991px) {.codepro-music-box button{left:auto;left:0}}
.codepro-music-box .toggle-codepro-music-box{top:-50px;visibility:visible;opacity:1}
</style>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"/>
<script src='//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script type='text/javascript'>//<![CDATA[
if($(".codepro-music-box").length) {var musicBtn = $(".codepro-music-box-toggle-btn"),musicBox = $(".codepro-music-holder");musicBtn.on("click", function() {musicBox.toggleClass("toggle-codepro-music-box");return false;})}
//]]></script>
<!-- end code music box -->Bước 2: Thay https://www.youtube.com/embed/Xh0YQp9odv4 thành link bài nhạc của bạn.
Bước 3: Chèn toàn bộ code vào trước thẻ </body>
Bước 4: Lưu lại!
Lời kết
Trên đây là toàn bộ source code mini music box và hướng dẫn sử dụng. Nếu có bất cứ thắc mắc hay khiếu nại về bản quyền hãy comment ngay phía dưới cho mình biết nhé.
Chúc các bạn có một ngày học tập và làm việc thật hiệu quả!