Design.Mini: sharing/embedding modal M14

[jellegerbrandy]

referring to the design on #162

Need to define the content of the sharing/embed modal.

Current modal for embedding is this:

Proposal is part of #162 (my screen capture refuses to select from the pdf) and has two options (link and embed snippet) together.

[jellegerbrandy]

@pedrocasa asks: "I still don't understand why we need so many options in that modal (is there another way to make it more automatic and simple?)"

[jellegerbrandy]

We probably should to it just as youtube does:

• click on the "share" icon
• open a modal with different sharing options: a) direct link b) twitter (opens twitter with card preset) c) embed
• clicking on embed opens the modal as above (without the "copy link", which makes no sense there). Perhaps we add a link to the showcase page as well here.

[jrgarou]

We can create two buttons on player to call the modals:

• modal one: social share + copy link. Something like youtube

• modal two: the embed code + options(capabilities and/or sizes)

Or we can create two modals linked and use the same approach that we got now on sign in/up modal:

what do you think @jellegerbrandy @pedrocasa?

[pedrocasa]

I Agree with @jellegerbrandy and @jrgarou about the "social share" ( direct to twitter, facebook, blabla )

My only concern is about the options of capabilities and sizes of the embed sharing.

• Do we need it all?
• Does the user needs to worry about what is the correct size for embedding it on his blog (what happens when the viewer of his blog open it on a mobile device that's smaller than the mini size ?)
• What happens when the user defines autoplay and the video is a pay-per-view

[jellegerbrandy]

@enricocicconi

[geckoslair]

@jellegerbrandy

"We probably should to it just as youtube does"

@pedrocasa

"My only concern is about the options of capabilities and sizes of the embed sharing." "Do we need it all?"

I think in that stage user (mostly creators maybe?) needs a deep control of the embeded player capabilities, look and feel etc.

"Does the user needs to worry about what is the correct size for embedding it on his blog (what happens when the viewer of his blog open it on a mobile device that's smaller than the mini size ?)"

It depends: mini, tiny ect. operate on two aspects: sizes and features. Sizes can be customized by the user/creators directly on the embed code. Maybe the best approach is to rename "tiny" and "mini" with something like "lite" "minimal" etc.

Sizes are just a way of saying: "ok man, you have chosen 'tiny' so this is the minimum suggested size for this type of setting.

Responsive embeded players (youtube, vimeo etc.) is quite debated among frontenders:

• http://embedresponsively.com/
• https://knowledge.hubspot.com/articles/kcs_article/cos-pages-editor/how-do-i-make-my-embedded-youtube-video-responsive

"What happens when the user defines autoplay and the video is a pay-per-view"

Let's take a choice: my opinion is that autoplay option is disabled for pay-per-view video!

[jellegerbrandy]

• +1 for renaming "tiny" and "mini" something like "minimal" and "lite" (although i do not much like "lite"). The october sprint does not have tiny in it, so for this iteration, we can hide the choice (and decide later)
• +1 for "autoplay is disabled for pay-per-view (if it is not paid for, of course :-))".
• About the complexity of options for the embed: this is only the beginning. Eventually, we want to have more customization options, even branding (add yr logo, change colors, etc). We do not have to decide right now how to visualize that - that decision can wait.

[pedrocasa]

re-uploaded https://github.com/Paratii-Video/paratii-player/issues/162

I made a two-steps modals for the embed function as a test
The actual "embed modal" seems a bit tight to me

[jrgarou]

I create the share modal with two "steps"(works on frontend branch):

[pedrocasa]

What does the "playsinline" option do? @enricocicconi

[pedrocasa]

the actual share modal is a bit tight One of the solutions is to add one step modal as the flow that I re-uploaded

[geckoslair]

@pedrocasa iOS (on iphone) by default play the video in fullscreen. Playsinline allows the video to play directly inside the iframe without going fullscreen.