VideoPress Block: Add setting for playing video inline

[roundhill]

We added support to the VideoPress player to support the playsinline attribute which will prevent a video from automatically playing full screen when on mobile. This PR adds a user-facing UI for that attribute to be set.

Changes proposed in this Pull Request:

• Adds a new toggle to the VideoPress block settings (disabled by default) that will allow a user to set if the video should be played inline in the browser.

Does this pull request change what data or activity we track or use?

No

Testing instructions:

• Before applying PR, add a VideoPress block to a post with a video and save it.
• Apply the PR and rebuild Jetpack. Load up the post you saved to ensure the block still loads properly. The Plays Inline setting should be untoggled.
• Add another new post and add a video block. Turn on the Plays Inline toggle, and publish the post.
• Inspect the video, and you should see the playsinline attribute applied to the video tag.
• Bring up the url on a mobile device (I tested on iPhone 12). Pressing play should play the video inline on the page, not taking you full screen.

[matticbot]

Caution: This PR has changes that must be merged to WordPress.com
Hello roundhill! These changes need to be synced to WordPress.com - If you 're an a11n, please commandeer and confirm D59449-code works as expected before merging this PR. Once this PR is merged, please commit the changes to WP.com. Thank you!
This revision will be updated with each commit to this PR

[github-actions]

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

• ✅ Include a description of your PR changes.
  
• ✅ All commits were linted before commit.
  
• ✅ Add a "[Status]" label (In Progress, Needs Team Review, ...).
  
• ✅ Add testing instructions.
  
• ✅ Specify whether this PR includes any changes to data or privacy.
  
• ✅ Add changelog entries to affected projects
  

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖

---

Once your PR is ready for review, check one last time that all required checks (other than "Required review") appearing at the bottom of this PR are passing or skipped.
Then, add the "[Status] Needs Team review" label and ask someone from your team review the code.
Once you’ve done so, switch to the "[Status] Needs Review" label; someone from Jetpack Crew will then review this PR and merge it to be included in the next Jetpack release.

---

Jetpack plugin:

• Next scheduled release: May 4, 2021.
• Scheduled code freeze: April 26, 2021.

[jgcaruso]

Code looks good and testing on mobile worked as expected.

One thing I noticed, not a result of this PR but something we probably need to address in the player, tapping on the video doesn't pause it. You need to tap the pause button directly in order to pause the video.

[jeherve]

While the PR adds the attribute well, I have some questions:

1. I don't see a difference in behaviour in Chrome on my Android device. Is that expected?
2. "Play Inline" doesn't really tell us much about what the toggle will change in our video? Could we add some help text, like it's done for the Autoplay toggle?

[roundhill]

• I don't see a difference in behaviour in Chrome on my Android device. Is that expected?

Chrome doesn't go full-screen by default, so yeah that's expected. I think this is mainly for iOS.

• "Play Inline" doesn't really tell us much about what the toggle will change in our video? Could we add some help text, like it's done for the Autoplay toggle?

Nice idea but it kinda sticks out like a sore thumb:

It'd be nice if the ToggleControl could do a hover tooltip but I didn't see a way to add that?

[jeherve]

Nice idea but it kinda sticks out like a sore thumb:

I didn't find this too disturbing since it only appears when the toggle is on, and since that's already how the Autoplay toggle works:

Maybe that's just me though ¯_(ツ)_/¯

I'll let someone else weigh in on this. :)

[jeherve]

Internal reference: r223581-wpcom

[jeherve]

Since this is already committed to WordPress.com, let's keep the codebases in sync. We can see if we get feedback from post authors about what the new setting means.

[github-actions]

Great news! One last step: head over to your WordPress.com diff, D59449-code, and commit it.
Once you've done so, come back to this PR and add a comment with your changeset ID.

Thank you!