[wp-trac] [WordPress Trac] #60178: wp_video_shortcode() outputs invalid HTML

[WordPress Trac]

#60178: wp_video_shortcode() outputs invalid HTML
---------------------------+-----------------------------
 Reporter:  jongycastillo  |      Owner:  (none)
     Type:  defect (bug)   |     Status:  new
 Priority:  normal         |  Milestone:  Awaiting Review
Component:  Shortcodes     |    Version:  6.4.2
 Severity:  normal         |   Keywords:
  Focuses:                 |
---------------------------+-----------------------------
 Did an audit of a website and found several invalid HTML for video tags
 that were output with `wp_video_shortcode()`. The errors:

 * Bad value `1` for attribute `loop` on element `video`
 * Bad value `1` for attribute `autoplay` on element `video`
 * Bad value `1` for attribute `muted` on element `video`

 Based on documentation from Mozilla, all 3 are boolean attributes. Here is
 an example of function usage that produced the HTML validation errors:

 {{{#!php
 <?php
 echo wp_video_shortcode( [
     'src'      => wp_get_attachment_url(9999),
     'class'    => 'my-custom-video',
     'poster'   => '',
     'loop'     => 'true',
     'autoplay' => 'true',
     'muted'    => 'true',
     'height'   => 1080,
     'width'    => 1920
 ] );
 }}}

 This part in `wp_video_shortcode()` is the culprit:

 {{{#!php
 <?php
 $attr_strings = array();
 foreach ( $html_atts as $k => $v ) {
         $attr_strings[] = $k . '="' . esc_attr( $v ) . '"';
 }
 }}}

 Currently, we are using the filter to clean up these attributes like this:

 {{{#!php
 <?php
 add_filter( 'wp_video_shortcode', function ( $output ) {
     // Clean up attributes for HTML validation
     $output = str_replace( [
         'autoplay="1"',
         'loop="1"',
         'muted="1"',
     ], [
         'autoplay',
         'loop',
         'muted',
     ], $output );

     return $output;
 } );
 }}}

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/60178>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform