Sugar kissed Letters

♡ Music Player ♡

A cute little clickable music player for your blog! ♡
Click the iPod (or your chosen icon) to play or pause your song. 🎀

♡ preview ♡

<style> /* ========================================== IPOD / MUSIC PLAYER WIDGET ========================================== */ #music-widget { position: fixed; right: 45px; bottom: 20px; z-index: 99999; text-align: center; } /* MUSIC PLAYER IMAGE */ #music-widget img { display: block; margin: 0 auto; transition: transform 0.2s ease; } #music-widget img:hover { transform: scale(1.08); } /* CLICK TEXT */ .music-click { font-family: "Comic Sans MS", cursive; font-size: 12px; color: #e88ab3; margin-top: 2px; } /* HIDDEN YOUTUBE PLAYER */ #music-player-container { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; } </style> <div id="music-widget"> <!-- ♡ MUSIC PLAYER IMAGE ♡ Replace the image link below with the GIF/PNG you want to use. --> <img src="PASTE YOUR MUSIC PLAYER IMAGE LINK HERE" width="110" height="110" border="0" style="cursor:pointer;" onclick="toggleMusic()" alt="Music player" > <div class="music-click"> ♡ click me ♡ </div> <div id="music-player-container"> <!-- ♡ SONG LINK ♡ Replace the link below with the YouTube EMBED link of your song. IMPORTANT: Keep the ?enablejsapi=1&origin=... part at the end of the link. Replace YOUR-BLOG-URL-HERE with your own blog URL. Example: https://www.youtube.com/embed/XXXXXXXXXXX?enablejsapi=1&origin=YOUR-BLOG-URL-HERE --> <iframe id="music-player" src="PASTE YOUR YOUTUBE EMBED LINK HERE" frameborder="0" allow="autoplay" width="1" height="1" ></iframe> </div> </div> <script> var musicPlaying = false; /* ========================================== PLAY / PAUSE MUSIC ========================================== */ function toggleMusic() { var player = document.getElementById( "music-player" ); if (musicPlaying) { player.contentWindow.postMessage( '{"event":"command","func":"pauseVideo","args":""}', "*" ); musicPlaying = false; } else { player.contentWindow.postMessage( '{"event":"command","func":"playVideo","args":""}', "*" ); musicPlaying = true; } } </script>

♡ by Sugar Kissed Letters ♡

♡ QUICK TUTORIAL ♡

01. choose your music player ♡

Find this part of the code:
src="PASTE YOUR MUSIC PLAYER IMAGE LINK HERE"

Replace it with the direct link to your desired GIF or PNG.


02. choose your song ♡

Find:
src="PASTE YOUR YOUTUBE EMBED LINK HERE"

Go to the YouTube video you want to use, click Share → Embed, and copy the video ID from the YouTube embed URL.

Then use it in this format:
https://www.youtube.com/embed/XXXXXXXXXXX?enablejsapi=1&origin=YOUR-BLOG-URL-HERE

Replace YOUR-BLOG-URL-HERE with the URL of your own blog. ♡

Make sure you keep ?enablejsapi=1&origin=YOUR-BLOG-URL-HERE at the end of the link.


03. add the widget to your blog ♡

Go to Blogger → Layout → Add a Gadget → HTML/JavaScript and paste the entire music player code into the content box.

You can place the gadget in whichever section you'd like. I have mine in “footer-2-2”. 🎀


04. that's it! ♡

Save your gadget and click your music player to play or pause your chosen song. 🎀

♡ have fun decorating your blog! ♡