ochFitvids (content plugin)

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:

Click to load the embedded media...

SoundCloud embedded player

Requirements

Joomla! 4.4 PHP 8.1 PHP 8.2

Joomla! 5.1 Joomla! 5.2 PHP 8.1PHP 8.2 PHP 8.3

  • Basic Joomla! knowledge available between the chair and the keyboard :)

Installation is easy!

  1. Download the plugin
  2. in the Back-end go to menu Extensions > Manage
  3. in the tab [Upload file package] click [browse]  and select your downloaded plugin
  4. click [Upload & Install], wait for the installation to finish

Configuration

  1. in the back-end go to menu Extensions > Plugins
  2. search / locate the 'ochFitvids' content plugin
  3. open the plugin
  4. in the tab [Plugin] set status to [Enabled]
  5. 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 and change-log integration

When you install the extension, it will automatically integrate with the Joomla Updater for both updates and change-logs.

On first use, the Joomla updater will prompt you with a 'Download Key is missing!' message.

  1. On this site: Go to [Tools > My Account > My Download Keys], and copy your Download ID#.
  2. On your site: Go to System > Update Sites, locate the extension, and paste the Download ID into the 'Download Key' field. Click [Save and Close].

Important:
If you're using this Download ID on a new server, you’ll receive an email to approve the device. Click the link in the email to enable downloads from this server.
Without approval, updates won’t be authorized, and the Joomla updater will display a 401 Unauthorized error when trying to fetch updates.

That’s it! You're all set.

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!

Agency Bundle - 12 months
Agency Bundle - 12 months
Supercharge your Joomla! toolbox with the Agency Bundle! Get all extensions plus 2 Hours of expert support – Subscribe today!
More Information
ochFitvids - 12 months
ochFitvids - 12 months
Boost engagement with videos: attract, inform, and extend on-page time, a crucial factor for Search Engine visibility and mobile audience engagement.
More Information

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)