[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:  Media          |     Version:
 Severity:  normal         |  Resolution:
 Keywords:  needs-patch    |     Focuses:
---------------------------+------------------------------

Comment (by gtjjxzle7):

 It appears that the issue you're encountering is with the
 wp_video_shortcode() function outputting invalid HTML attributes for the
 loop, autoplay, and muted attributes when set to true. These attributes
 should be boolean attributes according to HTML5 specifications.

 You've already implemented a workaround using a filter to clean up these
 attributes, but I'll provide some additional insights and suggestions for
 addressing this issue:

 1. **Understanding the Problem**: As you've correctly identified, the
 issue lies with how the wp_video_shortcode() function generates the HTML
 attributes. By default, it generates attributes like loop="1",
 autoplay="1", and muted="1", which are not valid according to HTML5
 standards.

 2. **Using Boolean Attributes**: According to HTML5 specifications,
 boolean attributes like loop, autoplay, and muted should be specified
 without a value, e.g., loop, autoplay, muted. Including a value (e.g.,
 loop="1") is not necessary and can result in invalid HTML.

 3. **Alternative Approach**: Instead of using the wp_video_shortcode()
 function with the loop, autoplay, and muted attributes set to "true", you
 can generate the <video> element manually in your template files or
 content. This gives you more control over the attributes and allows you to
 ensure that they are generated correctly according to HTML5 standards.

 4. **Custom Shortcode Function**: If you prefer to use a shortcode for
 embedding videos, you can create a custom shortcode function that
 generates the <video> element with the correct attributes. This gives you
 flexibility in how the shortcode is processed and allows you to enforce
 HTML5 compliance.

 Here's an example of how you can create a custom shortcode function for
 embedding videos:

 ```php
 function custom_video_shortcode( $atts ) {
     $atts = shortcode_atts( array(
         'src'      => '',
         'class'    => '',
         'poster'   => '',
         'loop'     => false,
         'autoplay' => false,
         'muted'    => false,
         'height'   => '',
         'width'    => ''
     ), $atts );

     // Generate video attributes
     $video_attrs = array(
         'src'      => esc_url( $atts['src'] ),
         'class'    => esc_attr( $atts['class'] ),
         'poster'   => esc_url( $atts['poster'] ),
         'loop'     => $atts['loop'] ? 'loop' : '',
         'autoplay' => $atts['autoplay'] ? 'autoplay' : '',
         'muted'    => $atts['muted'] ? 'muted' : '',
         'height'   => absint( $atts['height'] ),
         'width'    => absint( $atts['width'] )
     );

     // Generate video HTML
     $video_html = '<video';
     foreach ( $video_attrs as $attr => $value ) {
         if ( $value ) {
             $video_html .= ' ' . $attr . '="' . $value . '"';
         }
     }
     $video_html .= '></video>';

     return $video_html;
 }
 add_shortcode( 'custom_video', 'custom_video_shortcode' );
 ```

 With this custom shortcode function, you can use [custom_video] shortcode
 in your content with the appropriate attributes, and it will generate a
 valid <video> element according to HTML5 standards.

 By implementing one of these approaches, you can ensure that the video
 attributes are generated correctly and produce valid HTML output.

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