Project

General

Profile

Actions

Feature #88442

open

Allow iframe / video (youtube) javascript loading with "defer"

Added by Christian Hackl over 5 years ago. Updated 5 months ago.

Status:
Needs Feedback
Priority:
Should have
Assignee:
Category:
Fluid Styled Content
Target version:
-
Start date:
2019-05-26
Due date:
% Done:

0%

Estimated time:
PHP Version:
Tags:
fluid video defer
Complexity:
Sprint Focus:

Description

Allow loading a video through a kind of "defer" loading.
For example, the f:media viewhelper with an additional attribute defer = "true".

This makes it necessary to include additional JavaScript, as described here:
https://varvy.com/pagespeed/defer-videos.html

This could potentially improve the load time of the website.

Actions #1

Updated by Christian Hackl over 5 years ago

  • Subject changed from Allow Iframe / Video javascript loading with "defer" to Allow iframe / video (youtube) javascript loading with "defer"
Actions #2

Updated by Christian Eßl about 5 years ago

This would be a very helpful addition.
Just recently I created a very similar solution by overriding the YouTubeRenderer, but other video media types would also benefit from this feature. I will try to create a patch later.

Actions #3

Updated by Christian Hackl about 5 years ago

my current solution is: https://extensions.typo3.org/extension/hh_video_extender/

currently not the best code, but it does what it should

Actions #4

Updated by Georg Ringer over 4 years ago

  • Status changed from New to Needs Feedback

this is already possible by default using

<f:media class="video-embed-item" file="{file}" width="{dimensions.width}" height="{dimensions.height}" alt="{file.alternative}" title="{file.title}" additionalConfig="{additionalAttributes:{defer:'defer'}}" />

is that solution ok for you?

Actions #5

Updated by Christian Eßl over 4 years ago

No, there is no native "defer" attribute for html videos, so the browser wouldn't know from that information alone, that the video needs to be "lazyloaded".
For doing so, you would also need to override the "src" attribute to something like "data-src" and handle the lazyloading logic, that replaces "data-src" with "src" in some custom javascript. Otherwise the src would always be fetched

Question is: Should the core viewhelper support that (to override the attribute name for "src") or should this not be done in the core and better be done by third-party extension code, that implement their own video viewhelper solutions?
https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video#for_video_acting_as_an_animated_gif_replacement
Lazy loading videos is still a bit "tricky" to support all browsers and scenarios well enough.

Actions #6

Updated by Christian Hackl over 4 years ago

Yes, unfortunately you're right, especially now with all the privacy data stuff and the needed javascript.
Maybe it's not wise to put something like that into the core - it could be a bit tricky with the CookieConsent plugins, at least for users in the EU.
Hmm stupid... or?!

Actions #7

Updated by Stephan Bauer almost 3 years ago

Chrome supports lazy loading for iframes https://caniuse.com/?search=loading

I made a patch witch includes that:
https://forge.typo3.org/issues/96477

Actions #8

Updated by Benni Mack 5 months ago

We integrated "loading=lazy" for images, we could add this for videos via iframe now as well, as <f:media> VH can deal with this already.

Actions

Also available in: Atom PDF