Flex Video –> Responsive Embed

[andycochran]

This PR renames "Flex Video" to "Responsive Embed" so that it's clear that embedded content does not have to be a video (maps, calendars, widgets, etc). The documentation are also updated to be more clear, with video examples in the appropriate aspect ratios and an example of how to use custom ratios.

Note: The .flex-video class and flex-video mixin are to be deprecated in a future version (6.4?).

Closes #8199.

[designerno1]

looks good to me
i made a few device tests from the docs page
a docs redirect from flex-video.html to responsive-embed.html then would be nice

[andycochran]

@designerno1, can I set up redirects in the repo? I think Zurb will need to set up a manual redirect for docs/pages/flex-video.md –> docs/pages/responsive-embed.md.

[designerno1]

@andycochran
don't think it is possible in repo, also think zurb have to do that

[rafibomb]

Good work @andycochran and thanks for chiming in @designerno1. We can do this re-direct on our servers. I like it, just would like to get @kball to take a look so we can plan a smooth transition.

[rafibomb]

Ok looks good! Perhaps we also target the search (autocomplete) to suggest responsive embed when people type flex-video

You can do it in the front mattrr of the page

[andycochran]

@rafibomb Is this what tags are for in the frontmatter?

[kball]

Awesome. I added some tags in the front matter so it will show up in search.

Now adding a reminder for when we put together the release & release notes:

On Release we should add a redirect

[kball]

@andycochran can you put together a quick migration note for this in this PR?

[andycochran]

Migration Note

The .flex-video class and flex-video() mixin will be deprecated in a future version (6.4). They have been replaced by the .responsive-embed class and responsive-embed() mixin. This is a semantic improvement, as embedded content does not have to be a video.

[ctbarber]

@rafibomb I noticed that .responsive-embed class dropped the padding-top for the vimeo class. It was included in the flex-video.

Is that no longer needed now?

[andycochran]

@ctbarber Are you noticing issues with your Vimeo embeds?

I'm not sure I understand what padding-top: 0; was doing for Vimeo, as the default .responsive-embed class has no top padding. If there are issues with Vimeo, we could probably add that style for all responsive embeds and avoid the .vimeo class.

[ctbarber]

@andycochran no, not seeing any issues. Looks same with .responsive-embed class as it did with flex-video vimeo classes as best that I can tell. Just wanted to be sure that vimeo class was something that could be dropped since I didn't see any mention of it going away. Thanks for the reply.