playsinline being stripped from

  • Resolved Will Stocks

    (@willstockstech)


    5 years ago

    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)
  • Thread Starter 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/

    Thread Starter 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',
      ),
    )
  );
    Thread Starter Will Stocks

    (@willstockstech)

    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:

    Thread Starter Will Stocks

    (@willstockstech)

    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?

    Thread Starter Will Stocks

    (@willstockstech)

    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.

    Thread Starter 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>
    Thread Starter 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!

    Thread Starter 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:

    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)
  • The topic ‘playsinline being stripped from’ is closed to new replies.