The Embed Code Editor!

You do not have to double post your content. You do not need to worry about outdated Flash players on your site, in fact, you do not have to worry about what device your visitors are using.  With our easy to use HTML 5 responsive embed codes, you can simply copy and paste then sit back and relax.

  • You can drop in a fully-functional sermon browser that allows your visitors to display, page-through, filter all sermons from any SermonAudio account right into your own website!
  • They can download, listen to or watch any sermon without leaving your site or using your bandwidth or storage!
  • You can stream your LIVE Webcast from SermonAudio right from your website!
  • You can even create a custom list of sermons or a single sermon embed from your SermonAudio account and it could not be easier!
  • You can have a beautiful responsive HTML5 player right now!
  • You can customize the look and feel and still know that it will work everywhere.
So, what are you waiting for? Here is how it works!

Opening the Embed Code Editor from the Player

If you are already listening to the sermon you can get the embed code right from the player. Just look for the Embed Icon in the lower right corner of the player and click on it. This will open the window where you can select the options you want for your personalized embed.

Embed from Player

Opening the Embed Code Editor from a Live Webcast Player

If you are already listening to a live webcast you can get the embed code right from the webcast player. Like the regular player just look for the Embed Icon in the lower right corner of the window and click on it. This will open the window where you can select the options you want for your personalized embeddable webcast player.

Opening the Embed Code Editor from a Sermon Page

You can also get the embed code for any sermon on the site from the sermon page. To do so, first, navigate to the sermon page of the sermon that you wish to embed. This is the page with the big green PLAY button. You can get there by clicking on the title of any sermon in a listing on the site.

Sermon Page

Just click on the EMBED button to open the window where you can select the options you want to be included in the embed code for your personalized player.

Sermon Page Embed

Opening the Embed Code Editor from the Homepage dropdown

The embed code editor can be accessed as well from the “Podcast+codes” dropdown on the broadcaster homepage.

Our HTML sermon player is 100% HTML5-friendly and free of any flash components. It is also responsive so it works and looks fantastic in any size, on any device. It loads super-fast and the playback scrubbing is very smooth. The sermon player has built-in ability to adjust the playback speed and to skip back and forward in the sermon in increments of 15-seconds.
The player displays an aesthetically pleasing waveform representation of the audio and is fully responsive stretching to fit any size display. Choose between light or dark themes or specify a starting time to begin playback. The embed code supports automatically displaying the newest sermon by broadcaster, speaker, event type or series.

Embedding the player on your website is as easy as copy and paste. You can get the code from the sermon page or the player itself right while the sermon is playing.

For most single sermon embeds it is best to open the embed editor from the sermon page or player. Opening it from the homepage dropdown will limit your embed option to only the newest sermon from that account. If you need help finding the embed button see the steps above.

After clicking on the embed button you will be presented with the universal embed codes editor and a number of options to configure the player for your site.

Audio or Video

If available, video will be selected by default but if audio is also available you can also select it using the toggle at the top of the window.

You can also create embeds for webcasts and a full sermon browser from this dialog but that is covered in the sections below. Go ahead and select either the audio or video selection to change the code to embed your desired format.

Sermon Selection

Next, let’s select which sermon you wish to embed. By default, the “Single Sermon” option is set and will display the sermon you were on when you clicked into the editor window. If you click the sermon drop down, there you can also select the following options:

  • Most recent from Broadcaster (This will embed the newest sermon from the Broadcaster account where this sermon resides.)
  • Most recent from Speaker (This will embed the newest sermon in the account by the speaker of this sermon.)
  • Most recent in Series (This will embed the newest sermon in the series that this sermon is a part of. If the sermon is not part of a series this selection will default to “Most recent from Broadcaster.”)
  • Most recent in Event Type (This will embed the newest sermon of the same event type posted to this Broadcaster’s account.)

These will automatically be updated on the webpage where you embed the code with the newest sermon for the category that you select.  So, as an example, if you select “Speaker” from the dropdown, the code will automatically look to see what the latest sermon in this Broadcaster’s account by that speaker is and display that sermon.  When a new sermon by that speaker is posted the embed will dynamically change the sermon listed for you. Pretty neat, huh?

Width Selection

The player width setting is customizable if you need a specific width player for your site, but we recommend the default “auto” setting for most implementations as the player is responsive and will automatically adjust to any size screen on its own.

Custom Start Time

There is even an option to begin the sermon at a particular time. Simply check the “Use Custom Time” box and slide the start time over to where you wish the sermon to begin playing. You can fine tune your start time second by second with the arrows on each end of the timeline and hear or see the new start time by clicking the play button on the preview below. Note: this option is only available when you have the single sermon option selected. It cannot be set with a dynamically changing sermon embed.

Autoplay

Checking this box will start the sermon automatically when the page it is embedded on loads. Note: This can be an annoyance to some listeners so use this sparingly. This is especially important if you embed more than one sermon on a single page. If they both have the autoplay option enabled they will both start playing at the same time.

Themes

When the audio player is selected, two themes are available. Choose the light theme for websites that need a lighter player or stick with the dark theme if that looks better.

SSL

Do you have a secure site?  Need a secure player? SSL is built into our embed codes so you do not need to worry about that, we have you covered!

Once you have created the embed with the options you want, jump down to the “Copy and Paste” section.

You are almost done!

Clicking over to the “Webcast” embed option will display the webcast player window and if there is a webcast in progress for that Broadcaster, it will show up in the preview window at the bottom.

The webcast embed only has two options.

Width Selection

The first is the player width setting which is customizable if you need a specific width player for your site, but like the audio and video players, we recommend the default “auto” setting for most implementations as the player is responsive and will automatically adjust to any size screen on its own.

Autoplay

Checking this box will start the webcast automatically when the broadcaster goes live. This can be a great help to your viewers as there is no longer any need to refresh the page.  As long as the page you have the player embedded on is open the webcast will begin to play on its own without any user interaction. We recommend that you check the Autoplay box! It just makes it dead simple for people coming to your website to watch any live broadcasts in progress.

Note: All single sermon (audio or video) and sermon browser embed codes will also display a notification automatically for your visitors alerting them to a webcast in progress. We do not want your visitors to miss your live broadcasts!

Once you have created the embed with the options you want, jump down to the “Copy and Paste” section.

You are almost done!

The sermon browser is so fully-functional that it can almost double as its own standalone sermon site! It allows users to display, page through, and filter then listen to, watch or download any of your sermons without ever leaving your website. All with a single line of copy and paste code! Best of all it is responsive so it will look great on any device!

We think the defaults are a great look but if you want to change things up you can do that too, and as you do any changes will be immediately reflected in the preview at the bottom of the window.  You can interact fully with the preview and it will act and look exactly as it would when embedded elsewhere.  So let’s get started and take a look at what you can do.

First, you can choose either to display All Sermons or filter the sermons and only display a subset of all the sermons in your account.  The options for this are to show a particular Series, Event, Speaker, Language, Bible book, or Year.

Selecting a subset will display a second filter drop down where you can then select which one of the Speakers, etc. that you wish to display by default.

Next, once you have selected the set of sermons you wish to display by default, you can also select how they are sorted or what order they will appear in.

All your sermons are still available to the user and you will notice that the filter and sort menus will also appear in the browser.  So if a visitor to your site wishes to see a larger set or perhaps a different set of sermons they can do that using the filter and sort menus in the browser itself.

However, you can override this and remove the filtering and sorting from the embed code. This is helpful when you only want to display a certain set of sermons like a series but do not want to include the rest of your sermon content in that particular embed. To turn off the ability to filter and sort the sermons in your embed just uncheck the “Show Filter Options” box. It’s that simple.

The “Show Header” checkbox will toggle the header on and off in your embed.

Show Page Options” toggles the pagination controls at the bottom of the browser embed on and off.

You can also Remove the Background, toggle between light and dark themes, and add or remove an outside border to the browser with the click of a mouse.

But we are not finished just yet!

Width Selection

The browser width setting is customizable if you need a specific width browser for your site, but like the embed codes, we recommend the default “auto” setting for most implementations as the browser is responsive and will automatically adjust to any size screen on its own.

Height and Sermons Per Page

You can also specify how many sermons to display on a page and how tall the browser window is in pixels.  The height drop-down and the “Sermons per page” value work together to control how large over all the sermon browser is on your page and how many sermons are displayed on each page of the browser.  If you set the height too high and the number of sermons per page too low, you will end up with empty space at the bottom of the browser. If you wish to avoid this (and we really think you should) and you need to change the default height we highly recommend that you try different values in the sermons per page box to ensure that you do not leave a blank space at the bottom.  If you have more sermons than will fit in the browser window, a scrollbar will appear along the right-hand side of the browser window to allow the user to smoothly scroll through the sermons on a page within the browser.

Once you get it looking the way you like it all that is left is to copy and paste the code into your website.

The next section will show you how!

Once you have your embed configured the way you like, simply click the “Copy” button next to the line of code in the center of the window and copy it to your website.

You will know that you have captured the code on your clipboard when it says “Copied!”

You can now open a new page in your CMS (content management system) and paste the code into it. It is really that simple!

And last but not least, be sure that when you paste the code into your website you paste it “as code” and not as HTML. Some CMSs like WordPress Joomla, or Drupal, etc. will alter the code and insert characters in an attempt to make it into HTML if it is not pasted into the page “as code.” Doing so breaks the functionality of the embed code so make sure the text of the embed code that you paste into your page is not altered by your CMS (Content Management System).

That’s it!  You just embedded a sermon, webcast player or fully functional sermon browser into your site! 

Want to embed something that is not here?  We have plans to add to these embeds in the future and we may be already working on it. We would love to hear what you think!

How do I Back up and Restore Sermons on the iPhone App?

To back up the sermons that you have stored on your iPhone in the app open iTunes on your PC and select the device that you wish to back up from or restore to.

iphone backup 1

 

Next, scroll down until you see the APPS section on the left hand column of iTunes.

 

iphone backup 2

The apps that you have installed on your device will appear in the right hand column.  Scroll down to the FILE SHARING section and all the apps that allow file sharing will appear in that section. Select the SERMONS app from the list.

iphone backup 3

 

Once selected the column to the right will be populated with the sermons that are in the app. Select the sermon or sermons that you wish to save to your PC for back up.

iphone backup 4

Finally, click on the SAVE TO button to save them to a location that you select on your PC.

iphone backup 5

The process can be reversed and the files that you saved can be added back into the app using the ADD FILE button. (note: only files saved from the app can be loaded to the app again.)

iphone backup 6

Setting Cookies

For optimal performance on the SermonAudio site your browser should be enabled to accept cookies from the site.

Cookies are tiny text files stored on your computer when you visit certain web pages. SermonAudio.com uses cookies to remember the fact that you’ve already signed up for the newsletter and do not need to again. SermonAudio cookies cannot harm your computer and do not contain any personal or private information.

Follow the instructions below to enable cookies in your browser.

To allow SermonAudio to set cookies in Internet Explorer:

  1. Click on the “tools” icon in the upper left corner (it looks like a gear), or press the ALT+X keys on your keyboard.
  2. Select “Internet Options” from the menu.
  3. Click on the PRIVACY tab.
  4. Move slider to a setting no higher than “Medium High.”
  5. Click OK.
To allow SermonAudio to set cookies in Google Chrome:
  1. Click the Chrome menu on the browser toolbar. (It looks like three horizontal bars and is right next to the address window.)
  2. Select “Settings” from the menu.
  3. Scroll to the bottom of the window and click “Show advanced settings” link.
  4. In the “Privacy” section, click the “Content settings button”.
  5. In the “Cookies” section,  select “Allow local data to be set.”
  6. Click on “Done.”
  7. You can close the tabs that you have open in the browser.
To allow SermonAudio to set cookies in Firefox:
  1. Press the ALT+T keys on the keyboard, or select TOOLS from the menu bar at the top to open the TOOLS menu. (If you do not have the menu bar enabled you can get to the same dialog box by clicking on the FIREFOX button in the upper left corner and then selecting OPTIONS from the menu.)
  2. Select OPTIONS from the menu.
  3. Click on PRIVACY tab.
  4. Click on the History drop down and select “Use custom setting for history.”
  5. Check the box that says “Accept cookies from sites.”
  6. Click OK.