Joomla! 3 PHP 7.4 Maintenance Only
Joomla! 4 PHP 7.4 PHP 8.0 PHP 8.1
Adding video's to your website and blog is an excellent way to attract visitors to your website, share your message AND extent your visitors 'on page duration'. One of the important criteria of search engines in determining if your content is as good as you think it is, is the time visitors stay on your page. With an ever increasing number of mobile visitors it is important to also catch and hold their attention.
Not only your content but also your embedded video's must be responsive!
This Joomla! content plug-in integrates the ochFitvids.js script seamlessly into your web pages. The script will 'read' in real-time your visitors screen size and adjust the embedded video's embedded player size dynamically!
Which content providers are supported?
Currently the following content providers are supported out-of-the-box:
- Youtube
- Vimeo
- Ted.com
- Kickstarter
- Prezi
- Soundcloud
- PeerTube
- DailyMotion
Via and advanced setting you can add any Platform provider you like!
Screen-shots
[Gallery created with ochGlightbox]
Want to see the plugin in action?
Resize your browsers window, or if you are on a mobile device switch from portrait to landscape and see what happens with the youtube video below :)
Original youtube embedded video without ochFitvids integration:
Clickload embedded video, the video is loaded after the user clicks and activates the iFrame:
SoundCloud embedded player
Requirements
- Joomla 3.8+ or Joomla 4.0+
- Basic Joomla! knowledge available between the chair and the keyboard :)
Installation is easy!
- Download the plugin
- in the Back-end go to menu Extensions > Manage
- in the tab [Upload file package] click [browse] and select your downloaded plugin
- click [Upload & Install], wait for the installation to finish
Configuration
- in the back-end go to menu Extensions > Plugins
- search / locate the 'ochFitvids' content plugin
- open the plugin
- in the tab [Plugin] set status to [Enabled]
- click [Save & Close] and you are good to go
Plugin configuration: Embed Settings
- Force Youtube Privacy-enhanced mode: dynamically replace the youtube URL with the youtube-nocookies URL safeguarding you visitors' privacy
- Access level: configure the Access Level for the embedded iFrames. If the visitor (or registrered user) doesn't have the correct Access level, then a 'You are not authorized to view this video...' will be displayed
- Add Lazy Loading: configure if you want to automatically add the loading="lazy" attribute to the embedded iFrames
- Click Load: do not automatically load the iFrame but show a placeholder that needs to be clicked by the user before the iFrame contents are loaded
- Click Load Placeholder: select what the placeholde should look like > text, image or image provided (when supported) by the iFrame platform provider
- Placeholder Image: The image you want to use as (fallback) placeholder image
- Clean DIV: configure if you only want to add the embedded iFrame in the parent <div> or if you also want other elements in the <div> (like surrounding <p> etc.)
Activate Joomla! One Click update integration
Updating of the plugin is integrated with the Joomla! One Click Update manager. In order to activate follow the steps below:
- On this site: In the menu [Tools > My Subscriptions] copy your 'Download ID#'
- On your site: In the plugin configuration click the [Advanced] tab and paste the 'Download ID#' in the [Download ID] field
- Click [Save] or [Save & Close], You will be prompted with an informational message that your Download ID was changed.
Add Responsive video's in your blog / article
You can embed video's anywhere in your content. Copy and paste the embedded (iframe) code (not the URL!) into your article / blog text. That's it!
Tips & Tricks
- In the plugins configuration you can configure a custom div class as Selector. Default the (Selector) div class is "responsive-video".
- If you want to exclude an iFrame from being handled by ochFitvids:
- you can add the 'ochfitvids-ignore="true"' attribute to the iFrame code (<iframe ochfitvids-ignore="true" src="/.... )
- you can add 'ochfitvids-ignore' to the class of the iFrame code (<iframe class="ochfitvids-ignore"...)
- if you want to retain the iFrame original dimensions:
- you can add the 'ochfitvids-keepsize="true"' attribute to the iFrame code (<iframe ochfitvids-keepsize="true" src="/.... )
- you can add 'ochfitvids-keepsize' to the class of the iFrame code (<iframe class="ochfitvids-keepsize"...)
- if you want to force the handling of an iFrame that is not handled by ochFitvids (e.g. because the Platform Provider is new), you can:
- Add class "ochfitvids-force" to the iFrame: ochFitVids will then make this iFrame responsive, or
- In advanced setting add the Platform Provider to the Provider regex. Turn on debugging if you are facing issues to see if there is an error in the regex
- if you want to set a specific iFrame to click-load:
- you can add the 'ochfitvids-clickload="true"' attribute to the iFrame, or
- you can add 'ochfitvids-clickload' to the class of the iFrame code (iFrame class="ochfitvids-clickload"...)
- you can set a specific image as placeholder to the clickload iFrame by adding the 'data-image="[link-to-image]"' attribute to the iFrame
- Automatic placeholder image detection is available for YouTube, PeerTube, DailyMotion, Vimeo. The other providers either do not provide an image or need an account and login for the image.
- if you changed the Provider regex in advanced settings, you can easily return the value to the default for that version by removing the value and saving the plugin.
Technical support and feature requests via our forum (You need a valid subscription to be able to post)