Video Tutorial - Spotify & Other External Services

[Jaxel]

Spotify Page HTML:

<div class="spotify">
    <div class="background"></div>
    <div class="image"><img src="" /></div>
    
    <div class="info">
        <div>Track: <span class="track"></span></div>
        <div>Album: <span class="album"></span></div>
        <div>Artist: <span class="artist"></span></div>
    </div>
</div>

Spotify Page CSS:

body { margin: 0; }

.spotify
{
    position: relative;
    height: 150px;
    
    border: 5px solid #000;
    color: white;
    font-family: 'Tahoma';
    font-size: 20px;
    overflow: hidden;
    text-shadow: 0px 0px 5px #000;
}

.info
{
    position: absolute;
    top: 40px;
    left: 170px;
    right: 40px;
}

.info>div
{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.info span
{
    font-weight: bold;
}

.image
{
    position: absolute;
    top: 20px;
    bottom: 20px;
    left: 20px;
    
    border: 5px solid #000;
}
.image>img
{
    height: 100%;
}

.background
{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    
    background-size: cover;
    background-position: center;
    filter: blur(20px);
}

Spotify Page JS:

$('.track').text(docData['track']);
$('.artist').text(docData['artist']);
$('.album').text(docData['album']);

$('.image>img').attr('src', docData['image']);
$('.background').css('background-image', 'url(' + docData['image'] + ')');