Support » Plugin: Meta Box - WordPress Custom Fields Framework » playsinline being stripped from

  • Resolved Will Stocks

    (@willstockstech)


    Hi guys,
    I don’t know whether it’s Metabox doing this, or something else… but I’m wondering if you can help:

    As part of different post formats, my theme uses metaboxes to define certain items as part of the format:

    $meta_boxes[] = array(
        'id' => 'format_settings',
        'title' => esc_html__( 'Post Format Settings', 'linx' ),
        'pages' => array( 'post' ),
        'context' => 'normal',
        'priority' => 'high',
        'autosave' => true,
        'fields' => array(
          array(
            'type' => 'heading',
            'name' => esc_html__( 'Video Format', 'linx' ),
            'id' => 'heading_id',
          ),
          array(
            'name' => esc_html__( 'Video embed code', 'linx' ),
            'id' => "{$prefix}pf_video_data",
            'type' => 'textarea',
            'cols' => 20,
            'rows' => 4,
          ),
          array(
            'type' => 'heading',
            'name' => esc_html__( 'Gallery Format', 'linx' ),
            'id' => 'heading_id',
          ),
          array(
            'name' => esc_html__( 'Gallery images', 'linx' ),
            'id' => "{$prefix}pf_gallery_data",
            'type' => 'image_advanced',
            'max_file_uploads' => 10,
          ),
          array(
            'type' => 'heading',
            'name' => esc_html__( 'Audio Format', 'linx' ),
            'id' => 'heading_id',
          ),
          array(
            'name' => esc_html__( 'Audio embed code', 'linx' ),
            'id' => "{$prefix}pf_audio_data",
            'type' => 'textarea',
            'cols' => 20,
            'rows' => 4,
          ),
    	 array(
            'type' => 'heading',
            'name' => esc_html__( 'Link Format', 'linx' ),
            'id' => 'heading_id',
          ),
          array(
            'name' => esc_html__( 'Link to', 'linx' ),
            'id' => "{$prefix}pf_link_data",
            'type' => 'text',
          ),
        )
      );
    
      return $meta_boxes;
    }
    add_filter( 'rwmb_meta_boxes', 'linx_register_meta_boxes' );

    At the moment, I am trying to build out a video post, which has the following markup in the defined textarea:

    <video
    	preload="none"
    	class="lazyload"
    	muted=""
    	loop=""
    	data-autoplay=""
    	playsinline=""
    	-webkit-playsinline="" 
    	style="width:100%" 
    	src="https://cdn.willstocks.com/wp-content/uploads/2018/12/Mpow-Flame-2018-Special-Edition-Video-1.mp4">
    </video>

    However, the output (see here: https://willstocks.co.uk, scroll down to the MPOW post at the bottom) results in the playsinline and -webkit-playsinline values being removed from the <video>, which results in failure to autoplay on iOS devices.

    Can you see any reason for Meta Box stripping these two items? I’m not sure where else/why else these would be being removed

Viewing 13 replies - 1 through 13 (of 13 total)
  • Will Stocks

    (@willstockstech)

    Sorry, forgot:
    PHP 7.3
    Gutenberg 6.9
    WP 5.3
    Metabox 5.2.3

    Plugin Author Anh Tran

    (@rilwis)

    Hi Will,

    That probably is the sanitization issue. Please read this blog post for details and how to fix it:

    https://metabox.io/meta-box-510/

    Will Stocks

    (@willstockstech)

    Hi @rilwis

    I did try setting sanitize as follows:

       'priority' => 'high',
        'autosave' => true,
        'sanitize_callback' => 'none',

    I also tried:

    'fields' => array(
          array(
            'type' => 'heading',
            'name' => esc_html__( 'Video Format', 'linx' ),
            'id' => 'heading_id',
          ),
          array(
            'name' => esc_html__( 'Video embed code', 'linx' ),
            'id' => "{$prefix}pf_video_data",
            'type' => 'textarea',
            'sanitize_callback' => 'none',
            'cols' => 20,
            'rows' => 4,
          ),

    and still I see the same issue.

    I currently have the following applied to my site and you can see that those attributes still do not exist:

      $meta_boxes[] = array(
        'id' => 'format_settings',
        'title' => esc_html__( 'Post Format Settings', 'linx' ),
        'pages' => array( 'post' ),
        'context' => 'normal',
        'priority' => 'high',
        'autosave' => true,
        'sanitize_callback' => 'none',
        'fields' => array(
          array(
            'type' => 'heading',
            'name' => esc_html__( 'Video Format', 'linx' ),
            'id' => 'heading_id',
          ),
          array(
            'name' => esc_html__( 'Video embed code', 'linx' ),
            'id' => "{$prefix}pf_video_data",
            'type' => 'textarea',
            'sanitize_callback' => 'none',
            'cols' => 20,
            'rows' => 4,
          ),
          array(
            'type' => 'heading',
            'name' => esc_html__( 'Gallery Format', 'linx' ),
            'id' => 'heading_id',
          ),
          array(
            'name' => esc_html__( 'Gallery images', 'linx' ),
            'id' => "{$prefix}pf_gallery_data",
            'type' => 'image_advanced',
            'max_file_uploads' => 10,
          ),
          array(
            'type' => 'heading',
            'name' => esc_html__( 'Audio Format', 'linx' ),
            'id' => 'heading_id',
          ),
          array(
            'name' => esc_html__( 'Audio embed code', 'linx' ),
            'id' => "{$prefix}pf_audio_data",
            'type' => 'textarea',
            'cols' => 20,
            'rows' => 4,
          ),
    	 array(
            'type' => 'heading',
            'name' => esc_html__( 'Link Format', 'linx' ),
            'id' => 'heading_id',
          ),
          array(
            'name' => esc_html__( 'Link to', 'linx' ),
            'id' => "{$prefix}pf_link_data",
            'type' => 'text',
          ),
        )
      );
    

    Hi @rilwis

    Any further advice on this issue? The sanitization fix does not resolve.

    Thanks,

    Will

    Plugin Author Anh Tran

    (@rilwis)

    Hi @willstockstech ,

    I’ve tested your code and see the data is saved correctly. Please see this video:

    https://www.loom.com/share/620bfa0c3b2648f2a09ca3a5fd093c9c

    Hi @rilwis

    Thanks for checking this again for me – however my issue is not so much on the backend, it’s actually the frontend.

    The backend, everything is fine and the attributes are correctly there. It’s the actual <video that is output on the frontend (see: https://willstocks.co.uk/review-mpow-flame-2018-special-edition/ as an example) that is missing the two necessary attributes.

    Thanks,

    Will

    Plugin Author Anh Tran

    (@rilwis)

    Hi Will, that probably involves with the way you output the value. Can you show me the code you use to output the value?

    Hi @rilwis

    Apologies, I have been crazy busy for the last week + away!

    My output is fairly simple to be honest:

    		<?php
    			if ( $layout == 'one' || ( linx_is_first_post() && linx_get_option( 'linx_first_post_full', false ) == true ) ) {
    				if ( ! get_post_format() && has_post_thumbnail() ) :
    					linx_entry_media( array( 'layout' => 'one', 'cover' => $cover ) );
    				elseif ( get_post_format() == 'video' && rwmb_meta( 'linx_pf_video_data' ) != '' ) : ?>
    					<div class="entry-media">
    						<?php echo rwmb_meta( 'linx_pf_video_data' ); ?>
    					</div> <?php
    				elseif ( get_post_format() == 'gallery' ) :
    					linx_entry_media( array( 'layout' => $layout, 'gallery' => true ) );
    				elseif ( get_post_format() == 'audio' && rwmb_meta( 'linx_pf_audio_data' ) != '' ) : ?>
    					<div class="entry-media">
    						<?php echo rwmb_meta( 'linx_pf_audio_data' ); ?>
    					</div> <?php
    				endif;
    			} else {
    				linx_entry_media( array( 'layout' => $layout, 'cover' => $cover ) );
    			}
    		?>
    Plugin Author Anh Tran

    (@rilwis)

    Hi @willstockstech,

    Can you try replacing “rwmb_meta( ‘field_id’ )” with “get_post_meta( get_the_ID(), ‘field_id’, true )” and see if that works?

    get_post_meta() always returns raw meta AFAIK, so the attributes should be there.

    Will Stocks

    (@willstockstech)

    Hi @rilwis

    Applied:

    elseif ( get_post_format() == 'video' && rwmb_meta( 'linx_pf_video_data' ) != '' ) : ?>
      <div class="entry-media">
        <?php echo get_post_meta( get_the_ID(), 'linx_pf_video_data', true ); ?>
      </div> <?php

    And I’m still seeing the following output on the frontend:

    <div class="entry-media">
      <video preload="auto" class="lazyloaded " muted="" loop="" data-autoplay="" style="width:100%" src="https://cdn.willstocks.com/wp-content/uploads/2018/12/Mpow-Flame-2018-Special-Edition-Video-1.mp4" data-expand="-10">
      </video> 
    </div>
    Will Stocks

    (@willstockstech)

    @rilwis I’ve been doing some research – there’s something in WordPress stripping this attribute out, but I’ve no idea how to work around it.

    It’s available to add in Gutenberg (via a HTML or Video block I believe), but via “standard” WordPress methods, it doesn’t seem to work… I’m hoping you have more of an idea because my WP Dev experience is next to none! HA!

    Will Stocks

    (@willstockstech)

    Hey @rilwis
    Do you have any further thoughts on this?
    I’ve tried a few things, but nothing seems to work for me 🙁

    Plugin Author Anh Tran

    (@rilwis)

    Hi @willstockstech ,

    I’ve just checked again and see the data is outputted properly. Here is another video that I’ve just made:

    https://www.loom.com/share/6578a246ee9c4626846c25331a2ecf79

    I think you might be using some plugins that filter the outputted content. Please deactivate other plugins and try again.

Viewing 13 replies - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.