UX design for embeded video on posts

[willdoran]

Expected behaviour

• The user should be able to provide a link to a youtube or vimeo video, select its type and save
• The detail page should display the video embed in an iframe

Actual behaviour

• This is the current version I made for fun: http://d.pr/v/zeqJ

[rjmackay]

As mentioned on our call ideally this shouldn't extend the media input type, rather it should extend varchar but have a custom validator and input.

[willdoran]

@rjmackay yep, though this ticket is I think for mocking a UI for the video input

[brandonrosage]

@willdoran I intend to stage a flow that removes the need to select a service (e.g. YouTube), and instead sniffs the URL you provide and does the rest. If it can't sniff a known service, it'll ask the user to include all the embed HTML.

I'll do the sniffing in the PL for YouTube and Vimeo. But is that kosher?

[willdoran]

At the moment there is a function which converts the URLs given to the
embed format, each one has a slightly different format. Pulling the
source directly out of the URL is a good idea. We can clean them or
provided html before saving it. It's a bit dodgy to allow users to
insert html code. I'll check if we can adequately sanitize it to make it
save. It's a good idea though so I think it's worth trying to get it to
work.

On 2016-10-19 19:40, Brandon Rosage wrote:

@willdoran https://github.com/willdoran I intend to stage a flow
that removes the need to select a service (e.g. YouTube), and instead
sniffs the URL you provide and does the rest. If it can't sniff a
known service, it'll ask the user to include all the embed HTML.

I'll do the sniffing in the PL for YouTube and Vimeo. But is that kosher?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#1452 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACkdBWB5PLX9Wn3_p9saWYXEvsgTV0RUks5q1qqEgaJpZM4KZHI2.

[rjmackay]

I'd be very nervous about allowing users to give us the embed HTML. I'd rather we just supported a set list of services and let users know if they URL they provide doesn't match.

[brandonrosage]

@jshorland, @willdoran, and @rjmackay: How do y'all feel about the following UX?

[willdoran]

@brandonrosage wow - this looks amazing 👯‍♂️

[willdoran]

Test these changes by:

• Create a new survey
• Add to this survey a video embed field
• Save survey
• Add new post of the above survey type
• Set the field to junk and attempt to save
• Set field to youtube url of different types and save
• Set field to vimeo url of different types and save
• Attempt to view video on Post detail field
• Attempt to edit
• Change url and save

[jshorland]

• Formatting for embed field instructions is off:
  
• when not a proper youtube or vimeo url, it still saves:
  
• After embedding a video, a bit of padding between link box and video preview would be nice
  

[willdoran]

@jshorland All should be fixed by the latest

[jshorland]

Confirmed. Passes QA. lets get this shipped.