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 

How to use Let's Encrypt certificates with Keycloak

󰃭 2023-01-04 | #java #keycloak #letsencrypt #linux #tips #tutorials

Keycloak provides user federation, strong authentication, user management, fine-grained authorization, and more. Here is a guide to enable HTTPS access to your Keycloak server using a free Let’s Encrypt SSL certificate. The beauty of Let’s Encrypt is its ease of use and the fact that it’s free! This guide assumes you have already installed Keycloak at /opt/keycloak/ using the official guide for bare metal installs, and now you want to enable HTTPS access.

Continue reading 