8000 Embedded JW Player causes CLS (only when it autoplays) · Issue #4024 · jwplayer/jwplayer · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Embedded JW Player causes CLS (only when it autoplays) #4024

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
MrFacundo opened this issue May 19, 2023 · 0 comments
Open

Embedded JW Player causes CLS (only when it autoplays) #4024

MrFacundo opened this issue May 19, 2023 · 0 comments

Comments

@MrFacundo
Copy link
MrFacundo commented May 19, 2023 •
edited
Loading

Expected Behavior

Player embedded in an iframe autoplays a video without CLS issues

Actual Behavior

Player produces CLS when autoplayed

image
image

A div (some measurements indicate a div with the classes jw-controls jw-reset) seems to start rendered with a top position and the height of the video container, then it reduces size and changes position.

Steps to reproduce

  1. Paste this html into a html document and open it in Google Chrome.
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
</head>
<body>
	<div class="post__content-wrapper">
		<div class="iframe_wrapper"><iframe width="100%" height="400" class="iframe__video"
				frameborder="0" src="https://www.starmag.com/player/index/114370/3/13">
			</iframe></div>
		<figcaption class="post__excerpt"> Dans la réserve de Sabi Sand Game, en Afrique du Sud, un homme est à la
			recherche de lions. Mais il va tomber sur les félins plus vite qu'il ne le pensait ! </figcaption>
	</div>
</body>
</html>
  1. Open DevTools and toggle device view on.
  2. Check CLS issues in either the Performance tab->Start profiling and reload the page->Experience->CLS
    image

or the Performance Insights (lab) tab -> Measure page load-Insights->Cumulative Layout Shift
image

Environment

  • Desktop Computer
  • Windows 11
  • Google Chrome Version 113.0.5672.94 (Official Build) (64-bit)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@MrFacundo
0