Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                .header
    ul.header__menu
        li
            h1 MU&amp;IC
        li NEWS
        li.active MUSIC
        li VIDEO
        li ARTIST
        li EVENTS
        li CONTACT
    ul.header__user
        li
            i.far.fa-user-circle
        li MY LIST

.albums
    .albums__info
        img(src="https://picsum.photos/300", alt="")
        p Vlog Music
        p IU
        p 2017-Apr
        div.MV
    ol.albums__list
        li dlwlrma
        li Palette (Feat. G-DRAGON)
        li Ending scene
        li Can't Love You Anymore (With OHHYUK)
        li Jam Jam
        li Black Out
        li Full Stop
        li Through the Night
        li Full Stop
        li Dear Name
    .newAlbum__title New Albums
    ul.newAlbums
        li 
            img(src="https://picsum.photos/id/1003/115/115", alt="")
            p BBIBBI
        li 
            img(src="https://picsum.photos/id/1004/115/115", alt="")
            p SMASH HITS 2
        li 
            img(src="https://picsum.photos/id/1005/115/115", alt="")
            p SoulMate
        li 
            img(src="https://picsum.photos/id/1014/115/115", alt="")
            p Flower Bookmark
        li 
            img(src="https://picsum.photos/id/1025/115/115", alt="")
            p CHAT-SHIRE


#playbar
    img(src="https://picsum.photos/48", alt="")
    .song
        span.song__name dlwlrma
        span.song__album IU
    .btns
        i.fas.fa-step-backward
        i.far.fa-pause-circle
        i.fas.fa-play
        i.fas.fa-step-forward
    .time(data-all="5:00", data-out="2:37")
        input(type="range", min=0, max=100, value="0", step="1")
    .loop
        i.fas.fa-sync-alt 
        i.fas.fa-random 
        i.fas.fa-volume-up
        i.fas.fa-volume-down
        i.fas.fa-volume-mute
    .voice
        input(type="range", min=0, max=100, value="50", step="1")
        

script(src="https://www.youtube.com/player_api")
              
            
!

CSS

              
                @import url("https://fonts.googleapis.com/css?family=Roboto:400,400i,700");
@import url("https://fonts.googleapis.com/css?family=Merriweather:400,400i,700");

$color__active: #707070;
$color__default: #AEAEAE;
$color__title: #E9C79A;
$shadow: rgba(0, 0, 0, 0.16);
// min=992

body {
    background-color: #FCFBF6;
}

.active{
    color: $color__active;
}

.header{
    width: 1120px;
    padding: 19px 0;
    margin: 0 auto;
    line-height: 48px;
    font-family: 'Roboto';
    font-weight: 700;
    color: $color__default;
    &__menu {
        float: left;
        li {
            float: left;
            list-style-type: none;
            margin: 0 25px;
            &:nth-child(1) {
                color: $color__title;
                font-family: 'Montserrat';
            }
        }
    }
    &__user {
        float: right;
        li {
            float: right;
            list-style-type: none;
            margin-left: 30px;
            &:nth-child(1) {
                color: $color__title;
                font-size: 48px;
            }
        }
    }
}

.albums {
    width: 910px;
    margin: 0 auto;
    margin-top: 132px;
    margin-bottom: 160px;
    &__info {
        display: inline-block;
        vertical-align:top;
        width: 300px;
        margin-right: 63px;
        text-align: center;
        img {
            margin-bottom: 20px;
            border-radius: 5px;
        }
        p:nth-child(2) {
            font-size: 24px;
            font-weight: 700;
            color: $color__active;
            margin-bottom: 5px;
        }
        p:nth-child(3) {
            font-size: 20px;
            color: $color__default;
            margin-bottom: 10px;
        }
        p:nth-child(4) {
            font-size: 16px;
            color: $color__default;
            margin-bottom: 30px;
        }
        .MV {
            position: relative;
            p {
                font-size: 16px;
                font-weight: 700;
                text-align-last: left;
                color: $color__active;
                margin-bottom: 30px;
            }
            img {
                width: 300px;
                position: absolute;
                opacity: 1;
            }
        }
    }
    &__list {
        display: inline-block;
        list-style: none;
        counter-reset: li;
        vertical-align:top;
        li {
            width: 500px;
            border-bottom: 1px solid $color__default;
            counter-increment: li;
            font-size: 14px;
            color: $color__active;
            font-weight: 700;
            vertical-align:top;
            position: relative;
            &::before {
                content: counter(li);
                display: inline-block;
                color: $color__default;
                font-weight: 300;
                margin: 26px 27px 25px 22px;
                text-align: right;
                direction: rtl;
            }
            &::after {
                font-family: "Font Awesome 5 Free";
                font-weight: 500;
                font-size: 18px;
                content: "\f004";
                position: absolute;
                top: 26px;
                right: 0;
            }
        }
    }
    .newAlbum__title {
        font-size: 16px;
        font-weight: 700;
        margin: 40px 0 30px 0;
        color: $color__active;
    }
    .newAlbums {
        min-width: 839px;
        position: relative;
        margin-left: -30px;
        margin-right: -30px;
        li {
            display: inline-block;
            margin: 0 30px;
            text-align: center;
        }
    }
}


#playbar{
    min-width: 1200px;
    padding: 29px 0;
    text-align: center;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-image: url('https://images.unsplash.com/photo-1495195129352-aeb325a55b65?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1355&q=80');
    background-position: 50% 50%;
    color: $color__active;
    height: 105px;
    box-sizing: border-box;
    display:  flex;
    align-items: center;
    justify-content:  center;
    img {
        margin-right: 35px;
    }
    .song {
        display: inline-block;
        width: 90px;
        text-align: left;
        &__name, &__album {
            display: block;
        }
    }
    .fa-step-backward, .fa-pause-circle, .fa-play,
    .fa-step-forward, .fa-sync-alt, .fa-random,
    .fa-volume-up, .fa-volume-down, .fa-volume-mute {
        display: inline-block;
        font-size: 15px;
        padding: 0 10px;
    }
    .btns, .loop, .time, .voice {
        display: inline-block;
    }
    .fa-pause-circle, i.fas.fa-volume-down,
    i.fas.fa-volume-mute {
        display: none;
    }
    .fa-play, .fa-pause-circle {
        font-size: 22px;
        padding-left: 25px;
        padding-right: 15px;
    }
}
.time {
    margin-left: 72px;
    margin-right: 70px;
    width: 450px;
    position: relative;
    color: $color__active;
    &::before {
        content: attr(data-out);
        position: absolute;
        top: -9px;
        left: -45px;
    }
    &::after {
        content: attr(data-all);
        position: absolute;
        top: -9px;
        right: -45px;
    }
}
.voice {
    width: 80px;
    // margin-left: -15px;
    // transform-origin: 75px 75px;
    // transform: rotate(-90deg);
}

.rangeslider,
input[type='range'] {
  max-width: 450px;
}

.rangeslider__fill.rangeslider__fill {
    background: $color__active;}
.rangeslider__handle.rangeslider__handle{
    width: 4px;
    height: 20px;
    border-radius: 0%;
    top: -8px;
    background-color: $color__active;
    border: 0px solid $color__active;
    &:after {
    content: '';
    display: none;
    }
}
.rangeslider--horizontal.rangeslider--horizontal {
    height: 4px;
    top: 0;
}

              
            
!

JS

              
                let songBox = [
    {
        'name': 'Joakim Karud',
        'song': 'Hurry',
        'url_id': 'aktRSlPIpe4',
        'time': 181,
        'img': 'https://pbs.twimg.com/card_img/1155936169772797952/Taef9I-a?format=jpg&name=240x240'
    },{
        'name': 'Ikson',
        'song': 'Smile',
        'url_id': 'PFrLESPAflA',
        'time': 160,
        'img': 'https://pbs.twimg.com/card_img/1157901227616800768/WmkdleR-?format=jpg&name=240x240'
    },{
        'name': 'Erik Lund',
        'song': 'Tokyo Sunset',
        'url_id': 'ityziJlhlMg',
        'time': 222,
        'img': 'https://pbs.twimg.com/card_img/1155936169797963776/E-IQklFH?format=jpg&name=240x240'
    },{
        'name': 'Fredji',
        'song': 'Happy Life',
        'url_id': 'KzQiRABVARk',
        'time': 231,
        'img': 'https://hypeddit-gates-prod.s3.amazonaws.com/xwsu0o_coverartmanual'
    },{
        'name': 'Ikson',
        'song': 'Lights',
        'url_id': 'bqk80OOCxOQ',
        'time': 204,
        'img': 'https://hypeddit-gates-prod.s3.amazonaws.com/mltxa2_coverartmanual'
    },{
        'name': 'Jarico',
        'song': 'Landscape',
        'url_id': 'EwRdKJURDHw',
        'time': 216,
        'img': 'https://hypeddit-gates-prod.s3.amazonaws.com/2m6i4z_coverartmanual'
    },{
        'name': 'Damon Empero',
        'song': 'Eternal Summer',
        'url_id': 'ZJiAtRmNg6c',
        'time': 194,
        'img': 'https://i.ytimg.com/vi/ZJiAtRmNg6c/hqdefault.jpg?sqp=-oaymwEWCKgBEF5IWvKriqkDCQgBFQAAiEIYAQ==&rs=AOn4CLBvDQOY5AHIAUEZgr7uF1-ISWvD4Q'
    },{
        'name': 'Scandinavianz',
        'song': 'Atlantis',
        'url_id': 'GPJaN6piFbU',
        'time': 149,
        'img': 'https://pbs.twimg.com/card_img/1155936170376749056/IwteIOZ2?format=jpg&name=240x240'
    },{
        'name': 'Vlad Gluschenko',
        'song': 'Tide',
        'url_id': '6AAGAVPVA2I',
        'time': 177,
        'img': 'https://pbs.twimg.com/card_img/1157901227197423616/4DGDKuI_?format=jpg&name=240x240'
    },{
        'name': 'Vexento',
        'song': 'Devotion',
        'url_id': 'LnzWmAiJYHE',
        'time': 240,
        'img': 'https://pbs.twimg.com/card_img/1154804683237666816/GhU6IWqf?format=jpg&name=240x240'
    }
]
let startBtn = document.querySelector('.fa-play'),
    pauseBtn = document.querySelector('.fa-pause-circle')

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady(videoUrl) {
    player = new YT.Player('player', {
        height: '168',
        width: '300',
        videoId: videoUrl,
        playerVars: {
          autoplay: 1,
          controls: 0,
          showinfo:0
        },
        events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
        }
    });
}

function onPlayerReady(event) {
  // player.setVolume(50);
  startBtn.addEventListener('click', function() {
    player.playVideo();
  });
  pauseBtn.addEventListener('click', function() {
    player.pauseVideo();
  });
}

function onPlayerStateChange(event) {
    if(event.data === YT.PlayerState.ENDED){
        $('.fa-play').css('display','inline-block');
        $('.fa-pause-circle').css('display','none');
    }
    if(event.data === YT.PlayerState.paused){
        $('.fa-play').css('display','inline-block');
        $('.fa-pause-circle').css('display','none');
    }
    if(event.data === YT.PlayerState.PLAYING){
        $('.fa-play').css('display','none');
        $('.fa-pause-circle').css('display','inline-block');
    }
}

$(function() {
    var $document   = $(document),
        $inputRange = $('input[type="range"]');
    
    function valueOutput(element) {
        var value = element.value,
            output = element.parentNode.getElementsByTagName('output')[0];
    }
    for (var i = $inputRange.length - 1; i >= 0; i--) {
        valueOutput($inputRange[i]);
    };
    $document.on('input', 'input[type="range"]', function(e) {
        valueOutput(e.target);
        player.setVolume(e.target.value)
    });
    // end
  
    $inputRange.rangeslider({
      polyfill: false 
    });
})

let li_list = document.querySelectorAll('.albums__list li');
let ol_str = '';
for(let i = 0; i < songBox.length; i++) {
    ol_str +=`<li><span onclick="loadmusic(${i})">${songBox[i].name} - ${songBox[i].song}</span></li>`
}
document.querySelector('.albums__list').innerHTML = ol_str;

function loadmusic(listNum) {
    document.querySelector('.MV').innerHTML = `<p>Music Videos</p><img src="${songBox[listNum].img}" alt="Music Videos" data-list='${listNum}'><div id="player"></div>`
    onYouTubeIframeAPIReady(songBox[listNum].url_id)
    $('.fa-play').css('display','inline-block');
    $('.fa-pause-circle').css('display','none');
    $('.song .song__name').innerHTML = songBox[listNum].song;
}
function timeing(time) {
    time -= 1 
    let formatTime = function (time) {
        return [parseInt(num / 60 ), num % 60].join(':').replace(/\b(\d)\b/g, '0$1');
    } 
    $('.time').data('all') = formatTime(time)
}
              
            
!
999px

Console