Opened 12 hours ago
#41089 new defect (bug)
Video Player Full screen issue without play
| Reported by: |
|
Owned by: | |
|---|---|---|---|
| Milestone: | Awaiting Review | Priority: | normal |
| Severity: | normal | Version: | 4.8 |
| Component: | Embeds | Keywords: | |
| Focuses: | ui, javascript, performance | Cc: |
Description
After embedding mp4 video on page and without playing, I clicked on full screen button. Full screen does not work normally. It takes size inside browser width. Sometimes looks weird.
http://plugins.gallery/full-screen-bug/
After playing video, clicked on full-screen button. Then video gets actual whole screen size.
First I saw issue while working with WPLMS theme. To confirm where is bug I switched theme, updated all plugins and WordPress, issue not resolved.
I tested video with theme twenty seventeen, issue exist there also.
I have attached screenshots below.
Twenty seventeen Theme
WPLMS theme
To try with only HTML code, Took mediaelement folder from wp-includes and created index.html file to check issue, same issue happens. I have paste code below.
I think there might be issue in wp-mediaelement.min.css OR wp-mediaelement.min.js
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="mediaelementplayer.min.css" type="text/css" media="all" rel='stylesheet' />
<link href="wp-mediaelement.min.css" type="text/css" media="all" rel='stylesheet' />
<script src="http://www.ergotopia-portal.de/wp-includes/js/jquery/jquery.js?ver=1.12.4" type="text/javascript"></script>
<script src="mediaelement-and-player.min.js" type="text/javascript"></script>
<script src="wp-mediaelement.min.js" type="text/javascript"></script>
</head>
<body>
<div style="width:80%; margin:0 auto;">
<video id="player1" width="640" height="360" preload="none" style="max-width: 100%"
poster="images/big_buck_bunny.jpg">
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4">
<track src="dist/mediaelement.vtt" srclang="en" label="English" kind="subtitles" type="text/vtt">
</video>
</div><script>
jQuery('audio,video').mediaelementplayer() ;
</script>
</body>
</html>
Screenshots