jennatar's profile picture

Layout published by jennatar

published
updated

Add to Favorites

View Layouts

View Profile

Report Layout

How to Hide, Loop, and Autoplay the Embedded YouTube Player

Tags: youtube, music, embed, iframe, loop, autoplay, looping, hide, hidden, player

Description:

One of the most enjoyably evil traditions of y2k-era web design was hiding a music player somewhere on your website or profile page and setting it to autoplay.

I realize I'm standing on the shoulders of giants (and I'll update the description with links to the other code snippets and comments/commenters I've borrowed info from), but the missing piece--how to actually force a song to loop--was hidden right here, on the Google developers' API documentation for the YouTube player:

This parameter (loop) has limited support in IFrame embeds. To loop a single video, set the loop parameter value to 1 and set the playlist parameter value to the same video ID already specified in the Player API URL.

In other words, YouTube's embedded iframe player interprets your looping music as a playlist, but a playlist that only has one song on it. As such, you need to get the video's ID by checking the actual url (youtube.com/watch?v=VIDEO_ID) and then replace the VIDEO_ID text both times it appears in the layout code.

The code snippet below also sets the player to 0 pixels wide and 0 pixels tall but, in some browsers (as another user discovered), you need to use the css tag class="hideobj" to hide the iframe player instead. If you want to kindly allow visitors to pause the audio, just remove the aforementioned tag entirely, and change the iframe player's dimensions to those of your choosing. :)

To make your song play only once (rather than indefinitely), you'll want to also change the text in the code from loop=1 to loop=0. Good luck!

Editing to add: Make sure this code snippet for YouTube's iframe player does not appear inside your css's "style" tags. I have mine just after the last </style>, before any actual text.

Copy and paste this code into the "About me" section of your Profile to use it.

Caution: This Layout was not inspected by SpaceHey — use it at your own risk.


Comments

Displaying 20 of 21 comments ( View all | Add Comment )

Stern

Stern's profile picture

tysm for this!!! <3
Using!!!


Report Comment

ax !

ax !'s profile picture

using!!


Report Comment

sundaeeeyy

sundaeeeyy's profile picture

using!


Report Comment

Vincent.

Vincent.'s profile picture

used (:B


Report Comment

blossom

blossom's profile picture

doesnt work on firefox :(


Report Comment



does it not loop or does it not play at all?

by DustZ; ; Report

bebackwhen

bebackwhen's profile picture

Doesn't seem to work unfortunately. Used on Chrome.


Report Comment

illacme

illacme 's profile picture

thank so much!!! :DD


Report Comment

JCโ˜†

JCโ˜†'s profile picture

tysm!


Report Comment

๏นŸ๐Ÿช Judas / Bones ! ๐Ÿ Noctis' boyfriend

๏นŸ๐Ÿช Judas / Bones ! ๐Ÿ Noct...'s profile picture

Aa it works tysm!!


Report Comment

summer

summer's profile picture

ty ty ty!!


Report Comment

๐“Š๐“‹ผ๐“Šโ˜พEmileeโ˜ฝ๐“Š๐“‹ผ๐“Š

๐“Š๐“‹ผ๐“Šโ˜พEmileeโ˜ฝ๐“Š๐“‹ผ๐“Š's profile picture

works perfectly! Thank you for such clear instructions!!


Report Comment

Darner

Darner's profile picture

Can't seem to get it to work with autoplay functionality with Mozilla firefox. A shame too. I would have liked it to work for my page.


Report Comment



Just to clarify, it does still work right on chrome! Just not on firefox for some reason.

by Darner; ; Report

st4riesk33ter

st4riesk33ter's profile picture

Using this!! Tysm!! :]]]


Report Comment

Styracosaurus

Styracosaurus's profile picture

awesome, tysm!!


Report Comment

โ˜…Starโ˜…

โ˜…Starโ˜…'s profile picture

I can't get it to work :(


Report Comment

fork

fork's profile picture

tysm!! it works :)


Report Comment

Aubrey

Aubrey's profile picture

Works perfectly! Thanks so much, it means a lot!


Report Comment

frankiethebraindead

frankiethebraindead's profile picture

tried and it doesn't work :(
so sad i wanted music on my profile.


Report Comment

eli โ™ฑ

eli โ™ฑ's profile picture

it worked! tysm <3


Report Comment



aww, yay! I'm so glad <3 enjoy!!!

by jennatar; ; Report

clipperkilla

clipperkilla's profile picture

yeah cant get it to work either ive tried a few bits but maybe its just me i know fuck all about any of this


Report Comment



I haven't figured out what keeps it from working in Microsoft Edge, but it should work in versions of Chrome/Chromium at least. I'll keep fiddling with variables and try to get it working across browsers :)

by jennatar; ; Report