diff --git a/projects/plugins/jetpack/changelog/add-videopress-block-playsinline b/projects/plugins/jetpack/changelog/add-videopress-block-playsinline new file mode 100644 index 000000000000..8ce2938e05c8 --- /dev/null +++ b/projects/plugins/jetpack/changelog/add-videopress-block-playsinline @@ -0,0 +1,4 @@ +Significance: minor +Type: enhancement + +VideoPress Block: Added 'Play Inline' setting to play a video inline instead of full-screen on mobile devices when enabled. diff --git a/projects/plugins/jetpack/extensions/blocks/videopress/edit.js b/projects/plugins/jetpack/extensions/blocks/videopress/edit.js index ee7a70abccdd..260031a38e4f 100644 --- a/projects/plugins/jetpack/extensions/blocks/videopress/edit.js +++ b/projects/plugins/jetpack/extensions/blocks/videopress/edit.js @@ -279,6 +279,7 @@ const VideoPressEdit = CoreVideoEdit => controls, loop, muted, + playsinline, poster, preload, videoPressClassNames, @@ -321,6 +322,11 @@ const VideoPressEdit = CoreVideoEdit => onChange={ this.toggleAttribute( 'controls' ) } checked={ controls } /> + { muted: { type: 'boolean', }, - playsInline: { + playsinline: { type: 'boolean', }, poster: { diff --git a/projects/plugins/jetpack/extensions/blocks/videopress/save.js b/projects/plugins/jetpack/extensions/blocks/videopress/save.js index d2ab9ac56a97..720b443aa26a 100644 --- a/projects/plugins/jetpack/extensions/blocks/videopress/save.js +++ b/projects/plugins/jetpack/extensions/blocks/videopress/save.js @@ -19,6 +19,7 @@ const VideoPressSave = CoreVideoSave => props => { guid, loop, muted, + playsinline, poster, preload, videoPressClassNames, @@ -48,6 +49,7 @@ const VideoPressSave = CoreVideoSave => props => { controls, loop, muted, + playsinline, poster, preload, seekbarColor, diff --git a/projects/plugins/jetpack/extensions/blocks/videopress/url.js b/projects/plugins/jetpack/extensions/blocks/videopress/url.js index 4c314f3033ce..f3c7cc472316 100644 --- a/projects/plugins/jetpack/extensions/blocks/videopress/url.js +++ b/projects/plugins/jetpack/extensions/blocks/videopress/url.js @@ -10,6 +10,7 @@ export const getVideoPressUrl = ( controls, loop, muted, + playsinline, poster, preload, seekbarColor, @@ -26,6 +27,7 @@ export const getVideoPressUrl = ( // - Controls: Turned on by default. // - Loop: Turned off by default. // - Muted: Turned off by default. + // - Plays Inline: Turned off by default. // - Poster: No image by default. // - Preload: None by default. const options = { @@ -33,6 +35,7 @@ export const getVideoPressUrl = ( ...( ! controls && { controls: false } ), ...( loop && { loop: true } ), ...( muted && { muted: true, persistVolume: false } ), + ...( playsinline && { playsinline: true } ), ...( poster && { posterUrl: poster } ), ...( preload !== 'none' && { preloadContent: preload } ), ...( seekbarColor !== '' && { sbc: seekbarColor } ),