TB_wall video size not ersponsive

+1
0
-1

Hello

I've narrowed this down to being a theme-issue and not anything else, but switching themes and noting that video resizing works in all others themes except tb_wall.

The video modules used is videojs and in tb_wall the video window will not resize when the browser is resized. This means that someone using a phone, for example, will get a small article where everything is resized *except* the video.

+1
0
-1

Further inspection reveals why. In a different theme, the video loads like this:

While in tb_wall the video loads like this:

Yes, the only difference is thus the div class that preceeds it, div class "odd" kills the resizing. How very odd! :)

I thought perhaps this information would help me find the cause - but I can't find where the "odd" field item is set. ALl themes that work when resizing have "even" around the video.

+1
0
-1

Further inspection reveals why. In a different theme, the video loads like this:

<code><div class="field-item even">
<video id="video-RANDOMNUMBER-video" data-setup="{}" class="video-js vjs-default-skin" width="864" height="486" controls="controls" preload="auto" poster="https://tumbnail.jpg">
<source src="link.goes.here">
</video>
</div>
</code>

While in tb_wall the video loads like this:

<code>
<div class="field-item odd">
<video id="video-RANDOMNUMBER-video" data-setup="{}" class="video-js vjs-default-skin" width="864" height="486" controls="controls" preload="auto" poster="https://tumbnail.jpg">
<source src="link.goes.here">
</video>
</div>
</code>

Yes, the only difference is thus the div class that preceeds it, div class "odd" kills the resizing. How very odd! :)

I thought perhaps this information would help me find the cause - but I can't find where the "odd" field item is set. ALl themes that work when resizing have "even" around the video.

+1
0
-1

Here is a CSS solution to this, add to the video-js.css

* {max-width: 100%}
.video-js {
width: auto !important;
height: auto !important;
}

.video-js video {position: relative !important;}

.video-js .vjs-big-play-button {
top: 50%;
left: 50%;
margin:-4em 0 0 -6em;
}