[wp-trac] [WordPress Trac] #41089: Video Player Full screen issue without play

Sat Jun 17 21:16:44 UTC 2017

#41089: Video Player Full screen issue without play
-----------------------------------------+-----------------------------
 Reporter:  mkrndmane                    |      Owner:
     Type:  defect (bug)                 |     Status:  new
 Priority:  normal                       |  Milestone:  Awaiting Review
Component:  Embeds                       |    Version:  4.8
 Severity:  normal                       |   Keywords:
  Focuses:  ui, javascript, performance  |
-----------------------------------------+-----------------------------
 ''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/]
 [[BR]]
 ''After playing video'', clicked on full-screen button. Then video gets
 actual whole screen size.[[BR]]

 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.[[BR]]

 I tested video with theme twenty seventeen, issue exist there also.[[BR]]

 I have attached screenshots below.

 '''Twenty seventeen Theme'''
 [[Image(http://plugins.gallery/wp-content/uploads/2017/06/player-
 normal1.jpg)]]
 [[Image(http://plugins.gallery/wp-content/uploads/2017/06/player-after-
 fullscreen1-without-play.jpg)]]

 '''WPLMS theme'''
 [[Image(http://plugins.gallery/wp-content/uploads/2017/06/player-
 normal.jpg)]]
 [[Image(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.[[BR]]

 I think there might be issue in wp-mediaelement.min.css OR wp-
 mediaelement.min.js[[BR]]

 {{{
 <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>
 }}}

--
Ticket URL: <https://core.trac.wordpress.org/ticket/41089>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform