• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Help with video and mark up validation service

Contributor ,
Jul 11, 2023 Jul 11, 2023

Copy link to clipboard

Copied

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.

Views

100

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 11, 2023 Jul 11, 2023

Copy link to clipboard

Copied

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 & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Jul 11, 2023 Jul 11, 2023

Copy link to clipboard

Copied

Hi Nancy. Thanks for the ogg info.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Jul 11, 2023 Jul 11, 2023

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 11, 2023 Jul 11, 2023

Copy link to clipboard

Copied

Just the same, see my reply. 

 

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jul 11, 2023 Jul 11, 2023

Copy link to clipboard

Copied

LATEST
quote

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines