"Citizens of muse music"
Bootstrap 4.1.1 Snippet by Mamax64

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <head> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <style> .iframe { display: block; width: 100vw; height: 100vh; max-width: 100%; margin: 0; padding: 0; border: 0 none; box-sizing: border-box; } nav > .nav.nav-tabs{ border: none; color:#fff; background:#6f295f; border-radius:0; } nav > div a.nav-item.nav-link, nav > div a.nav-item.nav-link.active { border: none; padding: 18px 25px; color:#fff; background:#6f295f; border-radius:0; } nav > div a.nav-item.nav-link.active:after { position: relative; border: 15px solid transparent; border-top-color: #e74c3c ; } .tab-content{ background: #fdfdfd; line-height: 25px; border: 1px solid #ddd; border-top:5px solid #6f295f; border-bottom:5px solid #6f295f; } nav > div a.nav-item.nav-link:hover, nav > div a.nav-item.nav-link:focus { border: none; background: #c04b93; color:#fff; border-radius:0; transition:background 0.20s linear; } </style> <div class="container"> <div class="row"> <div class="col-xs-12 "> <nav> <div class="nav nav-tabs nav-fill" id="nav-tab" role="tablist"> <a class="nav-item nav-link active" id="nav-tab1-tab" data-toggle="tab" href="#nav-tab1" role="tab" aria-controls="nav-tab1" aria-selected="true">Spotify</a> <a class="nav-item nav-link" id="nav-tab2-tab" data-toggle="tab" href="#nav-tab2" role="tab" aria-controls="nav-tab2" aria-selected="false">Deezer</a> <a class="nav-item nav-link" id="nav-tab3-tab" data-toggle="tab" href="#nav-tab3" role="tab" aria-controls="nav-tab3" aria-selected="false">Apple Music</a> <a class="nav-item nav-link" id="nav-tab4-tab" data-toggle="tab" href="#nav-tab4" role="tab" aria-controls="nav-tab4" aria-selected="false">SoundCloud</a> </div> </nav> <div class="tab-content" id="nav-tabContent"> <div class="tab-pane fade show active" id="nav-tab1" role="tabpanel" aria-labelledby="nav-tab1-tab"> <iframe class="iframe" src="https://open.spotify.com/embed/user/11123811424/playlist/1ew7GtVtE023zcnnzMq9J5" width="100%" height="100%" frameborder="0" allow="encrypted-media"></iframe> </div> <div class="tab-pane fade" id="nav-tab2" role="tabpanel" aria-labelledby="nav-tab2-tab"> <iframe class="iframe" scrolling="no" frameborder="0" allowTransparency="true" src="https://www.deezer.com/plugins/player?format=classic&autoplay=false&playlist=true&width=700&height=350&color=007FEB&layout=dark&size=medium&type=album&id=77895022&app_id=1"></iframe> </div> <div class="tab-pane fade" id="nav-tab3" role="tabpanel" aria-labelledby="nav-tab3-tab"> <iframe class="iframe" allow="autoplay *; encrypted-media *;" frameborder="0" style="overflow:hidden;background:transparent;" sandbox="allow-forms allow-popups allow-same-origin allow-scripts allow-storage-access-by-user-activation allow-top-navigation-by-user-activation" src="https://embed.music.apple.com/us/album/simulation-theory-super-deluxe/1440779866?app=music"></iframe> </div> <div class="tab-pane fade" id="nav-tab4" role="tabpanel" aria-labelledby="nav-tab4-tab"> <iframe class="iframe" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/640112154&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe> </div> </div> </div> </div> </div

Related: See More

Bootstrap Wizard
Music / Video controls UI

Questions / Comments: