Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add example preview to video block. #20703

Merged
merged 3 commits into from
Dec 2, 2020
Merged

Add example preview to video block. #20703

merged 3 commits into from
Dec 2, 2020

Conversation

mtias
Copy link
Member

@mtias mtias commented Mar 8, 2020

Closes #17655

image

@mtias mtias added the [Block] Video Affects the Video Block label Mar 8, 2020
@github-actions
Copy link

github-actions bot commented Mar 8, 2020

Size Change: +147 B (0%)

Total Size: 1.19 MB

Filename Size Change
build/block-library/index.js 148 kB +147 B (0%)
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.14 kB 0 B
build/annotations/index.js 3.8 kB 0 B
build/api-fetch/index.js 3.42 kB 0 B
build/autop/index.js 2.84 kB 0 B
build/blob/index.js 665 B 0 B
build/block-directory/index.js 8.72 kB 0 B
build/block-directory/style-rtl.css 943 B 0 B
build/block-directory/style.css 942 B 0 B
build/block-editor/index.js 128 kB 0 B
build/block-editor/style-rtl.css 11.2 kB 0 B
build/block-editor/style.css 11.2 kB 0 B
build/block-library/editor-rtl.css 8.86 kB 0 B
build/block-library/editor.css 8.87 kB 0 B
build/block-library/style-rtl.css 8.27 kB 0 B
build/block-library/style.css 8.27 kB 0 B
build/block-library/theme-rtl.css 789 B 0 B
build/block-library/theme.css 790 B 0 B
build/block-serialization-default-parser/index.js 1.88 kB 0 B
build/block-serialization-spec-parser/index.js 3.06 kB 0 B
build/blocks/index.js 48.1 kB 0 B
build/components/index.js 172 kB 0 B
build/components/style-rtl.css 15.3 kB 0 B
build/components/style.css 15.3 kB 0 B
build/compose/index.js 9.95 kB 0 B
build/core-data/index.js 14.8 kB 0 B
build/data-controls/index.js 827 B 0 B
build/data/index.js 8.98 kB 0 B
build/date/index.js 11.2 kB 0 B
build/deprecated/index.js 768 B 0 B
build/dom-ready/index.js 571 B 0 B
build/dom/index.js 4.95 kB 0 B
build/edit-navigation/index.js 11.1 kB 0 B
build/edit-navigation/style-rtl.css 881 B 0 B
build/edit-navigation/style.css 885 B 0 B
build/edit-post/index.js 306 kB 0 B
build/edit-post/style-rtl.css 6.42 kB 0 B
build/edit-post/style.css 6.4 kB 0 B
build/edit-site/index.js 24.1 kB 0 B
build/edit-site/style-rtl.css 4.06 kB 0 B
build/edit-site/style.css 4.06 kB 0 B
build/edit-widgets/index.js 26.3 kB 0 B
build/edit-widgets/style-rtl.css 3.13 kB 0 B
build/edit-widgets/style.css 3.13 kB 0 B
build/editor/editor-styles-rtl.css 476 B 0 B
build/editor/editor-styles.css 478 B 0 B
build/editor/index.js 43.3 kB 0 B
build/editor/style-rtl.css 3.85 kB 0 B
build/editor/style.css 3.85 kB 0 B
build/element/index.js 4.63 kB 0 B
build/escape-html/index.js 735 B 0 B
build/format-library/index.js 6.86 kB 0 B
build/format-library/style-rtl.css 547 B 0 B
build/format-library/style.css 548 B 0 B
build/hooks/index.js 2.27 kB 0 B
build/html-entities/index.js 623 B 0 B
build/i18n/index.js 3.56 kB 0 B
build/is-shallow-equal/index.js 698 B 0 B
build/keyboard-shortcuts/index.js 2.54 kB 0 B
build/keycodes/index.js 1.94 kB 0 B
build/list-reusable-blocks/index.js 3.1 kB 0 B
build/list-reusable-blocks/style-rtl.css 476 B 0 B
build/list-reusable-blocks/style.css 476 B 0 B
build/media-utils/index.js 5.32 kB 0 B
build/notices/index.js 1.82 kB 0 B
build/nux/index.js 3.42 kB 0 B
build/nux/style-rtl.css 671 B 0 B
build/nux/style.css 668 B 0 B
build/plugins/index.js 2.56 kB 0 B
build/primitives/index.js 1.43 kB 0 B
build/priority-queue/index.js 791 B 0 B
build/redux-routine/index.js 2.84 kB 0 B
build/reusable-blocks/index.js 2.92 kB 0 B
build/rich-text/index.js 13.4 kB 0 B
build/server-side-render/index.js 2.77 kB 0 B
build/shortcode/index.js 1.69 kB 0 B
build/token-list/index.js 1.27 kB 0 B
build/url/index.js 2.84 kB 0 B
build/viewport/index.js 1.86 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.22 kB 0 B

compressed-size-action

@mtias
Copy link
Member Author

mtias commented Mar 8, 2020

cc @jasmussen

@Soean
Copy link
Member

Soean commented Mar 8, 2020

Internet Explorer 11 doesn't support the webm format, see caniuse. Maybe we should use a MP4 file.

@jasmussen
Copy link
Contributor

This video is so lovely.

But there are some challenges with it. Hotlinking files on Wikimedia are explicitly fine, and I would suggest that hover previews not working in IE11 is not a blocker because it's not accessibility related, and it's fundamentally necessary for the editor to work.

However the video is CC licensed 😩

https://commons.wikimedia.org/wiki/File:Wood_thrush_in_Central_Park_switch_sides_(16510).webm

While we could use it with attribution, in the past we've avoided that because of the challenge of where do we show that attribution.

This one is public domain, though: https://commons.wikimedia.org/wiki/File:Wood_thrush_(Hylocichla_mustelina).webm — it's not as good a video, but perhaps it serves the same purpose?

@mtias
Copy link
Member Author

mtias commented Mar 9, 2020

We are just linking to it, not embedding though. We could also just use a poster image since it doesn't seem to autoplay anyways.

@gziolo
Copy link
Member

gziolo commented Nov 28, 2020

Should we land it?

@mtias
Copy link
Member Author

mtias commented Nov 30, 2020

Yes, I think so

@gziolo
Copy link
Member

gziolo commented Nov 30, 2020

I'll rebase and merge 😄

@gziolo gziolo force-pushed the add/video-example branch from e2e4f50 to 4e33422 Compare December 1, 2020 16:58
@gziolo
Copy link
Member

gziolo commented Dec 1, 2020

I rebased and updated the example to include the caption, this is how it works on Safari:

Screen Shot 2020-12-01 at 17 59 57

I think autoplay is disabled in the editor so it doesn't interfere with the writing flow. controls is enabled by default. I delete both of them from the example.

Let's decide what we do about this PR given the issues the video creates on the browser support level and in terms of licensing as pointed out by @jasmussen.

@mtias
Copy link
Member Author

mtias commented Dec 1, 2020

It's just a link to a wikimedia resource

packages/block-library/src/video/index.js Outdated Show resolved Hide resolved
@gziolo gziolo merged commit 0a50f61 into master Dec 2, 2020
@gziolo gziolo deleted the add/video-example branch December 2, 2020 08:19
@github-actions github-actions bot added this to the Gutenberg 9.6 milestone Dec 2, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Video Affects the Video Block
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Enhancement: Add video example to the block library
4 participants