Motion Design Examples

Header with motion requirements

Autoplay:
- The video show play automatically as the default. For accessibility reasons, it should also offer a play button in order to stop the video.

Auto-muted:
- The video should have no volume when played. Since this is a design element, there should be no need for sound.

Video player branding stripped:
- We should not see any branding from the video player by default. We shouldn't know/care that the video is on YouTube, Vimeo, or Gfycat. The video ought to appear the same as a picture would. You wouldn't want flickr branding when embedding a picture. 

resized/responsive to fit entire header:
- Again, just like an image, the video should be resized appropriately to take the whole design block as you would expect an image to do. 

Vimeo as motion header

Autoplay: not working
Auto-muted: not working
Video player branding stripped: not working
resized/responsive to fit entire header: not working
 

YouTube as motion header

Autoplay: not working
Auto-muted: not working
Video player branding stripped: not working
resized/responsive to fit entire header: Sort of*
- The image resizes appropriately until the user hits the play button. Then it doesn't fill out the header.

gfycat as motion header

Autoplay: Good
Auto-muted: Good
Video player branding stripped: Sort of*
- It seems to work when in desktop mode, but when the site gets smaller, we start to see the gfycat branding which isn't attractive.
resized/responsive to fit entire header: Good

Short Hero with Motion:

No video option available.

Finally, What is the recommended way to embed videos when we DO want to feature them as just videos... as in, to watch. Looks like we can use "Content with Media" block like above... or use these "Text" blocks. The problem is that we don't get any control over the look and feel of the player. Even if I attempt to use code that allows me to do things change the player branding, that code get re-worked by drupal. We are only allowed the defaults. It also appears that the video will just take up the entire width of the block. 

Text: 1 Column Example

This is a test area for work-arounds. 

If we want to embed a video that auto-plays.