XF 2.1 Wrapper class for video on XF page

[Andy.N]

I'd like to put a video on an XF page. I like it to be responsive to both mobile and desktop computers.
I tried something like this but the video does not zoom down in the mobile device.
Obviously, I need to wrap the video in the the correct media wrapper class so it will be minimized properly.

<div class="messageText ugc baseHtml" style="text-align:center;">
        <video controls="" data-xf-init="video-init" width="480" poster="cover.png">
    <source src="video.mp4">
</video>
</div>

 

[Chris D]

This looks very much like the class names we use in XF 1.x so they will not work in XF 2.x:
<div class="messageText ugc baseHtml" style="text-align:center;">
As a rule of thumb if you have anything documented or something like this that worked in XF 1.x it almost certainly will not work in XF 2.x.

This should do it:

<div class="bbMediaWrapper">
   <div class="bbMediaWrapper-inner">
      <video controls data-xf-init="video-init" poster="cover.png">
         <source src="video.mp4" />
      </video>
   </div>
</div>

 

[Andy.N]

Thank you @Chris D . Appreciate it.
I notice that the <video controls> in your code does not have ="" like we use to. Is there a reason or overlook?
Also, I can't seem to center this video using style="text-align:center;" to either of the class above.

 

[Chris D]

This should be all you need to centre it:

<div class="bbMediaWrapper" style="text-align: center">
   <div class="bbMediaWrapper-inner">
      <video controls data-xf-init="video-init" poster="cover.png">
         <source src="video.mp4" />
      </video>
   </div>
</div>

controls is a boolean attribute so it should either be present, or not. If it's present, it doesn't need to have a value. If you try to give it a value (even if empty) it will still enable the controls but it's not needed.

 

[Mr Lucky]

Also, I can't seem to center this video using style="text-align:center;" to either of the class above.

Have you tried left and right margins set to auto?

edit: aha I would have more faith in what Chris gave you above

 

[Chris D]

This should be all you need to centre it:

<div class="bbMediaWrapper" style="text-align: center">
   <div class="bbMediaWrapper-inner">
      <video controls data-xf-init="video-init" poster="cover.png">
         <source src="video.mp4" />
      </video>
   </div>
</div>

controls is a boolean attribute so it should either be present, or not. If it's present, it doesn't need to have a value. If you try to give it a value (even if empty) it will still enable the controls but it's not needed.

My bad, this will probably do it:

<div style="text-align: center">
    <div class="bbMediaWrapper">
        <div class="bbMediaWrapper-inner">
            <video controls data-xf-init="video-init" poster="cover.png">
                <source src="video.mp4" />
            </video>
        </div>
    </div>
</div>

Have you tried left and right margins set to auto?

bbMediaWrapper handles this automatically if it is itself inside a text-align: center div.

 

[Andy.N]

Thanks again Chris. I tried yours earlier but it didn't work because you need to use text-align: center for both div.

 

[Chris D]

Actually it's just the first div - I made a mistake initially. I corrected it but it may have been after you saw it

<div style="text-align: center">
    <div class="bbMediaWrapper">
        <div class="bbMediaWrapper-inner">
            <video controls data-xf-init="video-init" poster="cover.png">
                <source src="video.mp4" />
            </video>
        </div>
    </div>
</div>