EverWeb Widgets

Responsive Podcast Widgets

These widgets can be used to create a podcast with audio and/or video or to add audio/video elements to a blog.
Click any widget icon to see the demo …

Podcast Episode

The Podcast Episode widget has an image with alt ext, an MP3 player and optional copright info in the left column and a text section with heading, optional fields for author, date and run time, text and an optional download link.
When viewed on devices with screen widths less than the break point setting, the text appears below the image and player.

Podcast Grid

The responsive image grid can be the actual podcast where the visitor can listen to an episode while scanning through the others. It can also be used to play a "taster" audio clip and link to the main episode.
The audio play/pause button is centered in the image and plays the MP3 file on click or tap. The plugin allows for pausing one player when another is selected.

Podcast Header

The header has a signup icon for the dropdown subscribe form, an h1 heading and a "hamburger" icon for the drop down menu.
The subscribe form has into text and fields for name and email address.
The navigation can open internal and external pages and files.

Playlist

The playlist can have up to 100 items. The page download time will not be effected by a large number of audio files since they are prevented from downloading until the visitor plays one.
The playlist is a very compact way of displaying a podcast - or any audio files for that matter. Once it is full, it can easily be archived.

Podcast Sidebar Ads

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 to allow the content to scroll or an auto height to reveal all the content.

Podcast Signup

The signup toolbar can be placed anywhere on the page and has a popup signup form and links to the previous and next episodes. The icons are SVGs so they can be adjusted for color and hover color.
The form slides up from the toolbar on clicking or tapping the subscribe icon. It has fields for name an email and the visitor can be returned to a specific page after submitting the form.

Podcast Toolbar

The Toolbar can be placed anywhere on the page and can overlay an item above it - like a hero image - by checking a box and adding transparency to the background.
It has links to the comments page, previous post, entries list, next post and a spam protected "Email Me" link. The icons are SVGs so their size, color and hover color can be adjusted.

HTML5 Video Episode

The widget has an HTML5 video player in one section and the episode info and optional download link in another. The MP4 video file is played natively in the browser
The text section has fields for the episode title, author, date, run time and description. The optional copyright field has a control to add the year and keep it updated.

VideoJS Episode

This is similar in all respects to the HTML5 video widget except it uses the VideoJS script so that the player will appear the same in the different browsers and has an auto pause function.
It loads a poster image on page load and has options to hide the fullscreen control and for the initial volume. Several can be inserted on a page since the video files don't download until they are played.

Vimeo Episode

Vimeo is a good option for those who publish to the EverWeb server and don't want to overload their data limits with video files and their corresponding Zip files.
The container is full width, responsive with a maximum width setting. The grid layout has two columns - one with the video and the other with the info and optional download link.The video can be left or right.

YouTube Episode

The YouTube episode has the same layout as the Vimeo version with the video player and the info in separate columns - side by side one wide screens and one above the other below the break point.
The video can be positioned left or right and there is an optional link to allow the visitor to go to the YouTube page to read the comments or post one.

Comments

A successful podcast requires an engaged audience. Interaction with podcast subscribers encourages them to feel as though they belong to a group and are more likely to mention the podcast to others.
Disqus is a very well know comments engine and - best of all - it's free. It is really easy to set up and, using this widget, only requires the Disqus "shortname" to be entered.

© EverWeb Widgets -