How can we help?
The Engagement 4Cast
Previously, we announced our new interactive video module for Drupal, HubDub. We followed that up with a more detailed under-the-hood look at how HubDub works and a discussion about a key part of the technology that drives HubDub: jPlayer. Now, for those of you who have downloaded the free module, here’s a quick “How To” on theming with HubDub!
The HubDub module uses the jPlayer class system in order to work well with library updates. As such, themers familiar with skinning jPlayer will recognize most of these classes, though many of them have been restructured for better responsiveness and simplification of the controls. There are two places to look for theme files – both live within the theme folder of the module. “Skins” is for the video controls themselves (play, seek, fullscreen), while “Overlays” is for the HubDub popups design. The module uses SASS for CSS preprocessing, and will continue to be updated for optimized CSS organization and cleanliness of code.
The video controls are themed through the “skins” subdirectory of the module’s “theme” folder. This is to separate the overall look of the player from the look of the overlays, and maps better to the original setup of jPlayer. We plan on adding more skins to choose from in the future, and this structure supports that.
.jp-topbar – the wrapper for the top controls. Currently set to have a background of black, with some of the controls varying their opacity to denote various states. When the items within the wrapper are lower opacity, they appear darker. If you change this background to a light color, those items will appear lighter when set to the lower opacity.
.jp-play – play button styling, set to be 10% of the video width by default.
.jp-state-playing – play button while the video plays (the pause button)
.jp-progress – the wrapper around the progress area. Includes the seek bar, play bar, current time and duration, and the video title. Set to be 80% of the video width by default.
.jp-seek-bar – the background of the progress bar
.jp-play-bar – the active area of the progress bar (the part that has been played already, and moves across the window)
.jp-seeking-bg – the transitional background when a video is loading to another seek point (i.e., when you click a point within the seek bar), currently set to a dark gray
.jp-current-time – the left-hand time, showing the current progress through the video, set to 15% of the progress bar width, with a 5% margin on the left, totaling 20%
.jp-title – the title of the video, set to be 60% of the progress bar width
.jp-duration – the right-hand time, showing the total length of the video, set to 15% of the progress bar width, with a 5% margin on the right, totaling 20%
.jp-full-screen – the expand button on the right of the main video controls bar. Set to be 10% of the video width by default
.jp-controls-holder – Contains the secondary controls for the video, including the audio control and loop toggle
.jp-volume-controls – contains all the audio controls, including mute, max volume, and the volume meter
.jp-mute – the mute button (left button), set to be 20% of the volume control area
.jp-state-muted .jp-mute – the active state of the mute button, when mute is enabled
.jp-volume-bar – the background (and wrapper) of the volume level bar, set to be 60% of the volume control area total
.jp-volume-bar-value – the actual level of the volume
.jp-volume-max – the max volume button (right button), set to be 20% of the volume control area
.jp-toggles – the wrapper for the loop button
.jp-repeat – the repeat button, set to 10% width
.jp-video-play-icon – the centered play button, set with an svg background with background-size property. If you need greater support for older browsers, replace this with a raster instead and reset the background-size property.
.jp-stop – available stop button which is not currently enabled by default, as the pause button effectively reaches the same goal. If you wish to turn it on, you’ll need to edit the hubdub-video.tpl.php file, as well as style and position it to your liking.
.jp-previous and .jp-next – available for playlists, but not currently enabled by default and functionality has not been tested with the overlays – enable at your own risk!
There are also a ton of playlist options which we have not enabled, but which jPlayer supports, so if you’re feelin’ fancy, go ahead and get down and boogie with it. 🙂
The overlays control is set within the module theme folder, inside of the “overlays” subdirectory. Currently has very minimal styling other than to set a semi-transparent black background on the overlays with white copy inside.
.hubdub-video – the wrapper for the video, to make it responsive
.hubdub-overlay – the main overlay wrapper, set all your overlay styles within this. Has a max-width and max-height of 100% so that it doesn’t overflow the video.
4Site Interactive Studios is a talented troupe of web professionals who are passionate about creating tools to support digital marketers. We love to hear from our community! Reach out to us with your thoughts and questions. And don’t forget to subscribe below to get notified when we post new blogs – no spam, just content👍🏼
Subscribe & stay ahead of the crowd with sage marketing tips and predictions.