Problem/Motivation

Chrome now supports native lazy loading on iframes: https://web.dev/iframe-lazy-loading/

Steps to reproduce

Insert a YouTube video on a node and add display:none; on it.
The iframe is loaded even if not displayed.

Proposed resolution

video_embed_field should add a loading="lazy" attribute on iframes.

Issue fork video_embed_field-3359973

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

prudloff created an issue. See original summary.

prudloff opened merge request !62

prudloff’s picture

prudloff commented
Status: Active » Needs review
mably’s picture

mably commented

@prudloff do you think we should add a custom configuration option similar to the one used for image fields?

prudloff’s picture

prudloff commented

I think the only case where we don't want lazy loading is when the iframe is near the top of the page.
This is common for images but might be less common for iframes, however I think having an option that is enabled by default would probably be best.

prudloff’s picture

prudloff commented
Version: 8.x-2.x-dev » 3.x-dev
prudloff’s picture

prudloff commented
Status: Needs review » Needs work

I rebased the MR on 3.x but now some tests are failing.

mably’s picture

mably commented

Tests have been fixed.

But we are still missing that configuration option.

mably opened merge request !96

mably’s picture

mably commented
Status: Needs work » Needs review

@prudloff could you have a look at my MR that adds the missing "loading" configuration option please? Thanks.

It also enables the "loading=lazy" feature for YouTube Playlist and Vimeo providers.

prudloff changed the visibility of the branch 3359973-native-lazy-loading to hidden.

prudloff’s picture

prudloff commented
Status: Needs review » Reviewed & tested by the community

I rebased the MR to fix conflicts.

I tried setting the loading option to lazy/eager on video fields and in CKE and everything seems to work correctly.

prudloff closed merge request !62

mably’s picture

mably commented

Great, let's merge this. Thanks for the review @prudloff!

  • mably committed e0e2b53d on 3.x 
    feat: #3359973 Native lazy loading

By: prudloff
By: mably
mably’s picture

mably commented
Status: Reviewed & tested by the community » Fixed

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.