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 100 comments ( View all | Add Comment )

cxlesti

cxlesti's profile picture

tysm! i was struggling to put bg music on my page for a bit now with an outdated yt embed :p


Report Comment

emophaze

emophaze's profile picture

i'll be using :))


Report Comment

πŸ•·οΈMakoπŸ•ΈοΈ

πŸ•·οΈMakoπŸ•ΈοΈ's profile picture

tyty! ^_^


Report Comment

ΰΌ˜β‹† β™― Cβ‚€β‚€β‚—β‚ƒβ‚›β‚œ ₖ₁D β‚„α΅£β‚€α΅€β‚™D.ᐟ.ᐟ

ΰΌ˜β‹† β™― Cβ‚€β‚€β‚—β‚ƒβ‚›β‚œ ₖ₁D β‚„α΅£β‚€α΅€β‚™D.ᐟ...'s profile picture

YIPPIE!!! usiiinggg!1!


Report Comment

Luvyuh0rnahxD

Luvyuh0rnahxD's profile picture

Tysm, i'm using this!!


Report Comment

Nosoi

Nosoi's profile picture

using


Report Comment

Irenγ…€β™‘ΰΎ€ΰ½² β‚Š

Irenγ…€β™‘ΰΎ€ΰ½² β‚Š's profile picture

Can i use this on mobile or do i have to paste the code on laptop??


Report Comment

⭐ AL3X // M4RK ⭐

⭐ AL3X // M4RK ⭐'s profile picture

Using!! X3


Report Comment

Fallon

Fallon's profile picture

Using!!


Report Comment

chara

chara's profile picture

using!


Report Comment

cherrystrapple

cherrystrapple's profile picture

omg ive been trying to get this FOREVER THANK YOU!! may both sides of your pillow be cold at night <3


Report Comment

yungbonz

yungbonz's profile picture

using!, thank you so much!!!!


Report Comment

Becca

Becca's profile picture

using!


Report Comment

Nikini

Nikini's profile picture

this is so great, using!


Report Comment

Peace/Eli

Peace/Eli's profile picture

using! :P


Report Comment

cory

cory's profile picture

Using!!


Report Comment

viktoriah69

viktoriah69's profile picture

It doesn't work, I did what it asked me to :( (mobile btw)


Report Comment

Luckyc1ov3rs7 πŸπŸ€

Luckyc1ov3rs7 πŸπŸ€'s profile picture

Amazing!! TYSM!!!


Report Comment

III

III's profile picture

USING TYSM


Report Comment

Λ– ݁π–₯” ݁˖ 4dv4nc3dd Λ– ݁π–₯” ݁

Λ– ݁π–₯” ݁˖ 4dv4nc3dd Λ– ݁π–₯” ݁'s profile picture

im confused on the video id part…


Report Comment