How to use the Youtube JS API to play music in the background

󰃭 2014-05-23

The Youtube JavaScript API allows you to embed YouTube videos and interact with them programatically. To use it, first you need to embed this script into your page:

<script src="http://www.youtube.com/player_api"></script>.

If you just want the audio, you can hide the element that contains the video:

<div id="player" style="position: absolute; top: -9999px; left: -9999px;"></div>

Here we use absolute positioning with negative coordinates because using display: none; will prevent the onReady handler from the Youtube player from triggering on Firefox. I ran across this problem when making this.

Finally, here’s a full example that will wait for the video to load and automatically play it:

Tags: #javascript #tutorials #youtube

More posts like this

Rainbow Tunnel

󰃭 2013-03-07 | #canvas #fun #javascript #programming-projects

Today I had some more time to code something fun, so I decided to make a tunnel of sorts. The trick is really simple, first you just draw rings around the center of the page, and tweak their position a bit depending on the position of the mouse. To achieve the rainbow effect, you just have to make it so each ring has its hue value a little higher than the ring before it, and increase all of the rings’ hues each frame.

Continue reading 

Starry Sky in HTML5 Canvas - Part 1

󰃭 2019-04-13 | #canvas #javascript #programming-projects #tutorials

In my spare time I often enjoy creating visualizations using HTML5 canvas. I’m planning to do a little presentation about this so I thought a good way to get started was to create a blog post explaining how to do a simple one. This tutorial will teach you how to create something like the image below from scratch! IMPORTANT – you can try out the result of this part of the tutorial by visiting this CodeSandbox.

Continue reading 