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

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 

Messing Around With Trig

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

Yesterday after work I had some time to waste, so I decided to do some silly things in javascript with a canvas and some trigonometric magic. Move your mouse around to change some variables, and click to toggle clearing of the canvas. You can achieve some trippy effects! colorful sine wave colorful flower These are all on my github, in case you wanna take a look.

Continue reading 