CinVin: Lazy Load YouTube Videos for Xenforo 2

XenForo 2 CinVin: Lazy Load YouTube Videos for Xenforo 2 1.1.0

No permission to download
Added a couple of new options...
  • ACP => System and Performance => Use 'Youtube-Nocookie' Domain When Playing Videos
  • ACP => System and Performance => Use YouTube Webp Preview Images
By default both are turned off. For more information on the options, read the descriptions in the ACP.

1635700167937.png
Slight update to tweak the cinvin_lazyloadyoutube.less CSS for XFMG so that the lazy loaded YT videos visually appear the same as stock XFMG embedded YT videos.
  • Updated so that the preview image is now the full width of the XFMG media container instead of actual size.
  • Updated so that the 'fancy box' embedded video is responsive size instead of absolute.
If you're not using XFMG then you can skip this update.
Since the release of XF 2.2 it has been bugging me that the editor 'preview' mode wasn't showing the YT video preview with this add-on. This update should fix that.

With the above in mind the target version of XF that is supported is now 2.2.x and above. As a rule of thumb I'll always target the current version of XF.

The IMG tag used has been updated a bit to have a generic alt attribute value of "XenForo {ID}" where {ID} is the YT value and to include loading="lazy" for lazy loading of the preview image for browsers that support it.
The CSS has been tweaked a bit for handling large resolutions better. Over at the Cameraderie photography forum we ran into the situation where the preview image of the video was not being properly centered in the middle of the frame on devices running really large resolutions. Smaller resolutions looked OK, only high resolutions were off.

While in there the CSS was tweaked a little to get rid of some unnecessary settings.

NOTE: All of the HTML ID and class names were also renamed to be uniquely appended with "cv" to avoid any conflicts with any other lazyload type addons.
This version requires XF 2.1.0 or above in order to be installed.
  • Fixed to use the minified version of the javascript file.
  • Changed iframe code to allow for autoplay complying with Google's updated policies on embedded media.
  • Tweaked the JS just a bit.
  • Updated the ACP icon, title, etc. to be consistent with other "CinVin" releases.
The current version of this add-on is always installed here at Alien Soup. Check our "What are you listening to?" thread to see it action.
Two updates in this release... :smiley:
  • Fixed a bug that would have caused multiple images to be loaded for each video.
  • Changed the div wrapper to be the standard bbMediaWrapper instead of a custom div.
Top