Blog Signup

EverWeb Widgets Podcast

Podcast Sidebar

Podcast Episode

Responsive Podcast Ad Sidebar

Podcast Title

Author:

Date:

Run Time:

The player is created using a modified version of AudioJS. The adjustments were required to make the player itself responsive.
The player is centered in the container and has a maximum width setting. This allows its width to be controlled separate from that of the container.
AudioJS was used since it has a large enough play/pause button for fingertip operation and there is no volume control since this is pretty much useless for touch devices like the iPad and iPhone.
The time section shows elapsed time and track duration. Skipping or replaying can be achieved by clicking or tapping anywhere on the progress bar.

Download MP3

© EverWeb Widgets -

Layout

The layout consists on a responsive width HTML5 <figure> element containing the podcast episode and an <aside> element with the scrolling ads or other info.
The sidebar is fixed width and can have either a fixed height as used in the above example or an auto height to reveal all the content.
At screen widths below the break point, the ads position themselves below the episode and become full width.
Episode
The h1 heading at the top is optional as is the image, The image has alt text and can have a border.
The MP3 player has responsive width. It has a play/pause button, progress bar and shows elapsed and run time.
There are fields for the episode title, author, date, run time, a description, optional download link and a copyright notice.
Link
The optional link is used to allow visiors to download a ZIP file containing the video. It has controls for color, hover color and background color.
The link can be configured to download a zip file which has been added to the EverWeb Assets or to download a file from a folder on the server. If publishing to a server other than the EverWeb one, the latter method is preferable.
ZIP
The .zip file can be created using the "Compress" function in the Finder's File menu but this is not very satisfactory for visitors who are using a device with the Microsoft OS. Check out the free Yemu Zip software for quickly creating PC compatible zip files.

Sidebar

The sidebar has a fixed width and can be set to any value. It can either have a fixed height to allow the content to scroll or be set to auto height to reveal all the content.
The optional heading has the option to show scroll arrows. These will disappeaar below the break point when the sidebar content becomes full height.
Sidebar Items
Items are added using a modified version of the EverWeb widget API Assets List. Images and links are optional and are turned on globally.
Each item can have an image, heading text and a full width CTA style link. The sidebar links share the download link's controls.

EverWeb Widgets Blog
All Rights Reserved
© EverWeb Widgets -