Skip to main content
Known Participant
July 11, 2023
Question

Help with video and mark up validation service

  • July 11, 2023
  • 2 replies
  • 332 views

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.

    This topic has been closed for replies.

    2 replies

    beng2000Author
    Known Participant
    July 11, 2023

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

    Nancy OShea
    Community Expert
    Community Expert
    July 11, 2023

    Just the same, see my reply. 

     

     

    Nancy O'Shea— Product User & Community Expert
    Nancy OShea
    Community Expert
    Community Expert
    July 11, 2023

    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.

     

    Nancy O'Shea— Product User & Community Expert
    beng2000Author
    Known Participant
    July 11, 2023

    Hi Nancy. Thanks for the ogg info.