Responsify is a powerful Joomla plugin designed to ensure that various media elements, including objects, videos, audio files, and iframes (such as YouTube and Vimeo embeds), are fully responsive on the front-end of your website.

With its Full Width Display feature, Responsify automatically adjusts media to fit the entire width of the page, providing a seamless viewing experience across all devices.

Additionally, the Click to Play option enhances page performance by loading certain media, like iframes, only when the user clicks a placeholder, reducing unnecessary load times and improving user interaction. This also assists with GDPR compliance by preventing external media, such as YouTube videos, from automatically loading and executing scripts without user consent. Media content is only activated when visitors manually click to play, giving them control over the data processed by third-party services.

Responsify 2 includes powerful new configuration options for finer control over how media is processed.

• Elements allows you to specify which media elements, such as video, object, embed, and selected iframes, are processed by the plugin.
• The Media Location option lets you choose between local, remote, or both types of media for processing, with remote media including sources like YouTube.
• Iframe Media gives you control over which iframes are processed—whether all, allowed media types, or only specific URLs.
• Use Allowed Iframe Media to automatically responsify common media types such as YouTube, Vimeo, and SoundCloud
• Allowed URLs option lets you define additional URLs for processing or optionally the only URLs to process.
• URL Exclusions provides a way to exclude specific URLs from being processed.

Installation

Install using the Joomla Extensions Installer - https://docs.joomla.org/Installing_an_extension

After installation enable the plugin - go to System -> Extensions -> Manage, type responsify in the Search field and press Enter. Click the icon below the Status heading to enable the plugin.

 

What it does

This plugin adds a wf-responsive class to all object, embed, audio, video, and an additional HTML container on some iframe elements.

For example, this code:

<video src="/my_movie.mp4" type="video/mp4"></video>

will become:

<video src="/my_movie.mp4" type="video/mp4" class="wf-responsive"></video>

An iframe displaying a Youtube video would become:

<span class="wf-responsive-container wf-responsive-container-full wf-responsive" role="figure"><iframe src="https://www.youtube.com/embed/7DiNhBXqc18?feature=oembed" width="560" height="315" title="Joomla 5.0 and Joomla 4.4 are here!" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen="" class="wf-responsive wf-responsive-full"></iframe></span>

Example Youtube Video in Full Width Display mode with Click to Play.

How to use it

Once enabled, all object, embed, and video and iframe tags will be processed when the page loads. All iframe tags with local content, and iframe tags with selected remove url values, will be processed.

To disable this for a particular element, add a class of wf-no-container or wf-responsive-off to the element, eg:

<video class="wf-responsive-no-container" src="/video.mp4"></video

Plugin Options

A few configuration options are available in the plugin parameters.

Full Width Display

Enable this option to display the media to fit the width of the page.

Click to Play

Enabling this option will replace any media iframe (Youtube, Vimeo etc.) with a placeholder, loading the iframe when it is clicked. The placeholder caption can be changed by using a Language Override for the Language Constant  PLG_SYSTEM_WF_RESPONSIFY_CLICK_TO_PLAY_TEXT_DEFAULT

Click to Play Text

Optional Click to Play text fpr the Click to Play placeholder. This will be used instead of the Language value.

Assign to Menu

Assign the plugin to load on these menu items only.

• Use CTRL + Click (or Command + Click on MacOS) to select multiple items.
• Use CTRL + Click (or Command + Click on MacOS) to deselect an item.

Exclude from Menu

Prevent the plugin from loading on the selected menu items.

• Use CTRL + Click (or Command + Click on MacOS) to select multiple items.
• Use CTRL + Click (or Command + Click on MacOS) to deselect an item.

Elements

Select the media elements processed by this plugin. By default, selected iframe and all video, object and embed elements are processed.

Media Location

The location of the media to responsify, eg: local, remote or both. Remote refers to content loaded from an external site, such as Youtube. Default is Local and Remote.

Iframe Media

Select which Iframe media to process, eg: All, Allow Iframe Media or Allowed Urls Only.

Allowed Iframe Media

A list of common media types to responsify, eg: Youtube, Vimeo, Soundcloud etc.

Allowed URLs

A list of URLs to process. These can be in addition to the Allowed Iframe Media or the only URLs to process.

URL Exclusions

A list of URLs to exclude from processing.

IFrame Poster Image

A poster image can be set on iframe elements using a data-poster attribute. This will display the image and a play button, which will load the iframe when clicked, eg:

<iframe width="560" height="315" src="https://www.youtube.com/embed/VWcG8mpc208" data-poster="images/joomla.jpg" frameborder="0"></iframe>