Video player resize

Hi i am new to vaadin . its amazing learning vaadin. i have been trying to play local videos in vaadin using the Video class .i m able to play video using FileResource . i have set width and height using the setWidth() and setHeight() method .when the video player is not playing it shows the video component with the width and height set using the above method but when the video is playing the component resizes to the width and height of the video. also it throws some error when the video is playing and the browser is closed. i inspected the video element in chrome and if i change the height and width there it is changing. How to set the width and height of video while playing.

I have the same problem. Any solution?

I will report this bug. As a (real) dirty fix, you can add a style name to the Video instance, and define the width/height in CSS using !important.

Are there any news upon the matter ?

I’m designing application (vaadin 7.3.3) which needs to display (as preview) several videos within a table.
Videos may have different native resolutions, but of course, they have to be displayed with same size within table.

I made VerticalLayout, set it’s width and height to 100%, made Table (4 columns each of them is for video preview,
100% width and height), created several FileResource backed videos (some with fullhd res, some with vga res),
set for them height and width to 90% and put them in the table.
Initially after loading of the page with table all videos are sized well, but after videos have been processed,
they get css width and height based on their native size.
If i set video’s width and heigth manually via firebug, they look well.
Analyzing layouts via vaadin debug finds no problems with them
(moreover, some videos get the correct width and heigth during analyzing :slight_smile: ).
Analyzing videoconnectors (again via vaadin debug) shows:
“width = 90% (actual: 1920px) / height = 90% (actual: 1080px)” for fullhd.

2 Joacim:
this dirty trick also does not work completely well:
the size of video itself does really get 90% width and height,
but the height of element still equals the native video height,
so the player controls are drawn significantly below the video itself.
I put these details into mytheme.scss:

.v-video {
max-height: 100%;
max-width: 100%;
height: 90%;
width: 90%

Thanks in advance !!!

P.S. In my case working workaround is such css rule (put in ‘mytheme.scss’):
.v-video {
max-height: 100%!important;
max-width: 100%!important;

  height:       100%!important;
  width:        100%!important;


This issue is fixed in the Video component in [AudioVideo add-on]