CoreCommunity ExtensionsIncubatorDistributionsTYPO3 4.5 ProjectsTYPO3 4.6 ProjectsTYPO3 4.7 ProjectsTYPO3 6.0 ProjectsTYPO3 6.1 ProjectsTYPO3 6.2 Projects (+)

Bug #31093

Correct width and height calculations in video tags

Added by Bernhard Eckl over 1 year ago. Updated about 1 year ago.

Status:Needs Feedback Start date:2011-10-19
Priority:Could have Due date:
Assignee:Bernhard Eckl % Done:

0%

Category:Frontend Spent time: -
Target version:-
Branch:v4
Votes: 0

Description

If a content element is inserted, the content element is an HTML5 video player (VideoJS from ext html5video), the content is not displayed correctly because the lightbox calculates width and height of 0 and adds it as style to the tags. I corrected dirty by inserting the following CSS:

#cboxContent video, #cboxContent .video-js-box {
height: 100% !important;
width: 100% !important;
}
#colorbox, #cboxOverlay, #cboxWrapper {
overflow:visible !important;
}

The first one is to display the video correctly in the lightbox and full screen. The second is for the fullscreen mode, so you can see the video in fullscreen without the borders of the lightbox.

History

Updated by Bernhard Eckl over 1 year ago

I have more information regarding the bug. If I use the plugin to enlarge an image, the same bug is here (height:0). I was not able to display the image correctly unless I defined the constant plugin.rzcolorbox.innerWidth. Then I switched back to rzcolorbox version 1.3.5 (which is not in TER anymore and which is marked as it has a security issue). After switching back, I reupgraded to 1.4.1. And since then it is working fine. Very strange...

Updated by Raphael Zschorsch about 1 year ago

  • Category set to Frontend
  • Status changed from New to Needs Feedback
  • Assignee set to Bernhard Eckl
  • Priority changed from Should have to Could have
  • Branch set to v4

Is it still working? Maybe a cache problem..

Updated by Bernhard Eckl about 1 year ago

It is still working.
But there is still some CSS needed to display the video correctly in the lightbox. Have a look here: http://www.haw-aw.de/studium/bachelorstudiengaenge/medizintechnik.html (right column the second image is clickable, check Firefox).

Also available in: Atom PDF