WordPress.org

Make WordPress Core

Opened 2 years ago

Closed 18 months ago

Last modified 17 months ago

#41089 closed defect (bug) (worksforme)

Video Player Full screen issue without play

Reported by: mkrndmane Owned by:
Milestone: Priority: normal
Severity: normal Version: 4.8
Component: External Libraries Keywords:
Focuses: javascript 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
http://plugins.gallery/wp-content/uploads/2017/06/player-normal1.jpg
http://plugins.gallery/wp-content/uploads/2017/06/player-after-fullscreen1-without-play.jpg

WPLMS theme
http://plugins.gallery/wp-content/uploads/2017/06/player-normal.jpg
http://plugins.gallery/wp-content/uploads/2017/06/player-after-fullscreen.jpg

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>

Attachments (2)

screenshots.zip (533.4 KB) - added by mkrndmane 2 years ago.
Screenshots
mediaelement-folder-with-html.zip (192.8 KB) - added by mkrndmane 2 years ago.
mediaelement folder with custom html code

Download all attachments as: .zip

Change History (5)

@mkrndmane
2 years ago

Screenshots

@mkrndmane
2 years ago

mediaelement folder with custom html code

#1 @swissspidy
2 years ago

  • Component changed from Embeds to External Libraries
  • Focuses ui javascript performance removed
  • Keywords reporter-feedback added

Does updating MediaElement resolve the issue? See #39686 for a patch.

#2 @mkrndmane
18 months ago

  • Focuses javascript added
  • Keywords close added; reporter-feedback removed
  • Resolution set to worksforme
  • Status changed from new to closed

This bug has fixed in latest version of WordPress.

#3 @ocean90
17 months ago

  • Keywords close removed
  • Milestone Awaiting Review deleted
Note: See TracTickets for help on using tickets.