Native HTML5 Video, Code Re-Written, Removes "playsinline" attribute

[alexwright]

Heya-

Playing around with inserting native HTML5 video rather than YouTube / Vimeo hosted video.

I used a text box to insert the following “standard” HTML5 video code :

<video autoplay loop muted playsinline poster="/wp-content/uploads/2017/01/AdobeStock_113604337_Video_HD_WM.jpg" class="fullscreen-video">
	<source src="/wp-content/uploads/2017/01/AdobeStock_113604337_Video_HD_WM.mp4" type="video/mp4">
	<source src="/wp-content/uploads/2017/01/AdobeStock_113604337_Video_HD_WM.webm" type="video/webm">
	<img src="/wp-content/uploads/2017/01/AdobeStock_113604337_Video_HD_WM.jpg" title="Your browser does not support the video tag">
</video>

Your system re-wrote that to this :

<video class="fullscreen-video" poster="/wp-content/uploads/2017/01/AdobeStock_113604337_Video_HD_WM.jpg" autoplay="autoplay" loop="loop" muted="" width="300" height="150">
<source src="/wp-content/uploads/2017/01/AdobeStock_113604337_Video_HD_WM.mp4" type="video/mp4" />
<source src="/wp-content/uploads/2017/01/AdobeStock_113604337_Video_HD_WM.webm" type="video/webm" />
<img src="/wp-content/uploads/2017/01/AdobeStock_113604337_Video_HD_WM.jpg" title="Your browser does not support the video tag" />
</video>

That is more or less fine – I changed the width to 100% and the height to auto. The trouble is, your system is stripping out the playsinline attribute, which is necessary for iOS10 to auto-play native HTML5 video. Android Chrome requires the muted attribute and iOS10 requires playsinline.

I tried inserting playsinline="playsinline" but your system stripped that out.

Is there a way to insert native HTML5 video as HTML without being re-written?

THANKS!

-Alex

[David Martin – Support]

The theme will not do this as such, can you test this with Twenty16 or Twenty17 enabled?

[alexwright]

Thanks for looking into this.

It’s definitely something to do with Swift Page Builder. When I input this in a text box :

<video autoplay loop muted playsinline poster="/wp-content/uploads/2017/01/AdobeStock_113604337_Video_HD_WM.jpg" class="fullscreen-video">
	<source src="/wp-content/uploads/2017/01/AdobeStock_113604337_Video_HD_WM.mp4" type="video/mp4">
	<source src="/wp-content/uploads/2017/01/AdobeStock_113604337_Video_HD_WM.webm" type="video/webm">
	<img src="/wp-content/uploads/2017/01/AdobeStock_113604337_Video_HD_WM.jpg" title="Your browser does not support the video tag">
</video>

This is what comes back :

<video class="fullscreen-video" poster="/wp-content/uploads/2017/01/AdobeStock_113604337_Video_HD_WM.jpg" autoplay="autoplay" loop="loop" muted="" width="300" height="150">
<source src="/wp-content/uploads/2017/01/AdobeStock_113604337_Video_HD_WM.mp4" type="video/mp4" />
<source src="/wp-content/uploads/2017/01/AdobeStock_113604337_Video_HD_WM.webm" type="video/webm" />
<img src="/wp-content/uploads/2017/01/AdobeStock_113604337_Video_HD_WM.jpg" title="Your browser does not support the video tag" />
</video>

So something is re-writing that code, as the width and hight attributes are getting added, and the autoplay, loop and muted attributes are being changed and the playsinline attribute is being removed altogether.

I changed themes to 2017 on the staging server : http://smartchargeam.staging.wpengine.com/drive-electric/

I can’t test with the Text Block element (as that doesn’t exist without Swift Page Builder) but putting in that raw HTML works fine – nothing in the code gets changed and the playsinline attribute remains and it plays fine on iOS10.

How can I insert raw HTML for a video tag without it being re-written using Swift Page Builder’s text block element? Maybe I’ll try turning off Swift Page Builder and adding the code not inside a text block shortcode element.

THANKS!

-Alex

[alexwright]

I got this to work It’s a bit cumbersome because the HTML isn’t inside any shortcode so it gets glitched up when re-ordering the page. But it works :

[spb_row element_name="Electrify Your Ride" wrap_type="standard-width" row_bg_type="color" color_row_height="content-height" bg_type="cover" parallax_image_height="content-height" parallax_image_movement="fixed" parallax_image_speed="standard" bg_video_loop="yes" parallax_video_height="window-height" row_id="electrify-your-ride" row_name="Electrify Your Ride" row_top_style="none" row_bottom_style="none" parallax_video_overlay="none" row_overlay_opacity="0" remove_element_spacing="no" row_col_spacing="0" row_col_pos="default" row_col_equal_heights="no" row_expanding="no" row_animation="none" row_animation_delay="0" minimize_row="no" simplified_controls="yes" custom_css_percentage="no" custom_css="margin-top: 0px;margin-bottom: 0px;" border_styling_global="default" width="1/1" el_position="first last"] [spb_text_block animation="none" animation_delay="0" simplified_controls="yes" custom_css_percentage="no" padding_vertical="0" padding_horizontal="0" margin_vertical="0" custom_css="margin-top: 0px;margin-bottom: 0px;" border_size="0" border_styling_global="default" width="1/1" el_position="first last"]
<h2>Electrify Your Ride</h2>
[/spb_text_block]

<video autoplay loop muted playsinline poster="/wp-content/uploads/2017/01/AdobeStock_113604337_Video_HD_WM.jpg" class="fullscreen-video">
	<source src="/wp-content/uploads/2017/01/AdobeStock_113604337_Video_HD_WM.mp4" type="video/mp4">
	<source src="/wp-content/uploads/2017/01/AdobeStock_113604337_Video_HD_WM.webm" type="video/webm">
	<img src="/wp-content/uploads/2017/01/AdobeStock_113604337_Video_HD_WM.jpg" title="Your browser does not support the video tag">
</video>

[spb_text_block animation="none" animation_delay="0" simplified_controls="yes" custom_css_percentage="no" padding_vertical="0" padding_horizontal="0" margin_vertical="0" custom_css="margin-top: 0px;margin-bottom: 0px;" border_size="0" border_styling_global="default" width="1/1" el_position="first last"]

Some short body copy about Electrify Your Ride. Shoudn't be too long.

Vix vide fieriest tractates ut. Efficiantur necessitatibus eos ei, magna nemore labores ei pro. Ne sed oratio eigendi, accuaam detracto cu vim, mei oblique bonorum constituam te. Et nec maxime utroque. Sumo adolescent qui ea, no pro vitae dolores maluisset. Maecenas ultrices viverra ligula, vel lobortis ante pulvinar sed. Doce erat magna, aliquot vitae semper vitae, accusant vel nis. Vivamus pellentesque orci sit met odio dictum eget kommod nulla consequent. Prooien iaculis trirtique nis ut eleifend. Mecenas locus purus, malesuada eu scelerisque ac, commode sed orci.

[/spb_text_block] [spb_divider type="thin" text="Go to top" top_margin="60px" bottom_margin="60px" fullwidth="no" width="1/1" el_position="first last"] [/spb_row]

Putting that HTML inside a text box doesn’t work as it gets re-written.

Maybe just an FYI at this point. You all don’t claim to support native video, so it was a hack anyways.

THANKS!

[David Martin – Support]

Just an idea, have you tried pasting in the code using the Raw HTML asset?

[alexwright]

Yes but that just outputs the raw HTML like if you wanted to show someone code. But maybe I’m missing something here.

[alexwright]

The Raw HTML block did the trick. Thanks! I was thinking of the Code Block which then outputs the raw code.

Weird that the text block re-writes the code but all’s well that ends well.

THANKS again for being so helpful. Feel free to mark this ticket as resolved.

-Alex

[David Martin – Support]

Hi Alex,

The TExt Editor will be at the mercy of the WP Editor so the formatting can change. Raw HTML will be totally unfiltered HTML which is great for this purpose.

Glad this helped you.