I agree to the use of cookies in accordance with the Sourcefabric Privacy Policy.

Support our media development efforts

Please note: due to the quarantine measures required by the coronavirus outbreak, we are unable to answer the phone in our Prague office. Please send an email to contact@sourcefabric.org and someone will get back to you as soon as possible.

Who, what, when, where and why

Get the latest news about Sourcefabric software, solutions and ideas.

BACK TO BLOG OVERVIEW

How to embed the Airtime Pro player widget

Demo page on the Airtime Pro page with the player embedded
Demo page on the Airtime Pro page with the player embedded

Last week we announced the release of our new embeddable player widget for Airtime Pro. It’s never been easier to add a web player to your stations website. Ready to get started? Here’s how to get the most out of the new player and details on how to find the embed code. 

Customization screen for the player widget

Customization screen for the player widget

Where do I get started?

If you already have an Airtime Pro account, skip to the next section and follow the directions. If you are new to Airtime Pro, have a look at our features and then get started on a free trial or try our demo. Next, explore some of our tutorials to help you get started and then follow these directions to get your player widget embedded on your website.

How to customize the player and find the embed code.

To get started, find the player screen by clicking 'System' -> 'Player'. From there you’ll have several options to choose from and a display of important information related to the player. The ‘Title’ section allows you to change what will be displayed in the header of the player, in case you’d rather have your station name there. The ‘Select Stream’ section has two options, the first (autodetect the most appropriate stream to use) will detect the stream that’s going to be the most compatible with the player, if you chose the second option (Select a stream) you can force it to choose one of your Airtime Pro streams. At the bottom of the page you’ll find a grid that will show you which browsers and stream types are best suited for your station.

The most important section on the screen is the embeddable code field, this is what you’ll copy and paste into the backend of your website. You can copy and paste it directly to the page you’d like to put it on. As an example, I created a blank page with the player on it. Here’s what the code would look like: 

If you have a CMS such as Wordpress, you can insert it in via the text editor, here’s a screenshot of what it looked like when I edited it in:

Wordpress backend with player embed code

Wordpress backend with player embed code

 And here is a demo of the embedded player on the Airtime Pro page:

Demo page on the Airtime Pro page with the player embedded

Demo page on the Airtime Pro page with the player embedded

 We’d love to see how you’re embedding the player in your website, please send us screenshots to contact@sourcefabric.org and we’ll feature you on our Who’s Using page.

BACK TO TOP