Help with video and mark up validation service

[beng2000]

Hello. I have a video here traumainchildhood.com It works well but comes up with this on the validator. I understand it just wants a number not a % sign.

1. Error: Bad value 100% for attribute width on element video: Expected a digit but saw % instead.

   From line 142, column 61; to line 142, column 109

   col-xl-6"><video width="100%" height="100%" autoplay muted>↩ <so

2. Error: Bad value 100% for attribute height on element video: Expected a digit but saw % instead.

   From line 142, column 61; to line 142, column 109

   col-xl-6"><video width="100%" height="100%" autoplay muted>↩ <so

-------------------------------------------------------------------------------------------------------

This is my html: which works well:

<div class="container padding-top">
<div class="row">
<div class="align-self-center text-center col-xl-6"><video width="100%" height="100%" autoplay muted>
<source src="video/healing.mp4" type="video/mp4">
<source src="family.ogg" type="video/ogg">
Your browser does not support the video tag.
</video></div>

Is there a simple work around for this issue?

Thanks.

[Nancy OShea]

You can safely remove the height attribute. 

Bootstrap has built-in video classes for the various aspect ratios— 1:1, 4:3, 16:9 and 21:9.  See example below.

<div class="container"

<div class="row">

<div class="col-lg-6">
<h2>Aspect ratio 1:1</h2>
<div class="embed-responsive embed-responsive-1by1">

<video autoplay muted>
<source src="video/healing.mp4" type="video/mp4">
</video>

</div>

</div>

<div class="col-lg-6">
<h2>Aspect ratio 4:3</h2>
<div class="embed-responsive embed-responsive-4by3">

<video autoplay muted>
<source src="video/healing.mp4" type="video/mp4">
</video>

</div>

</div>

</div>

</div>

OGG file type is not necessary.  All web devices support MP4 files now.  Fallbacks are not required anymore.

Hope that helps.

[beng2000]

Hi Nancy. Thanks for the ogg info.

[beng2000]

Disregard, I used css and it is working fine. Thanks

[Nancy OShea]

Just the same, see my reply. 

[osgood_]

Disregard, I used css and it is working fine. Thanks

By @beng2000

Yes, just set the video width using css:

video {

width: 100%;

}

No need to set a height as video will retain its aspect-ratio.

OR use the Bootstrap video utility classes as it looks like youre using that css framework (at least some of it) - I dont know what 'padding-top' is, looks like you are mixing and matching.