HTML 5 Video header

[nerdpruitt]

http://www.winshape.org/camps/

[jeremymansfield]

I knew this was coming from them, so here it is unsolicited.

The white of DO YOU LOVE DANCE? disappears a lot in the first few videos. Is there a way to make it a color or add a shadow that won’t do that?

[nerdpruitt]

Haha, I understand. We can do color and/or drop shadow, man...whatever you prefer. What do ya wanna try?

[jeremymansfield]

Drop shadow for sure. Open to hard versus softened? I didn't experiment in PShop but should have.

On Feb 17, 2015, at 8:21 PM, Nick Pruitt notifications@github.com wrote:

Haha, I understand. We can do color and/or drop shadow, man...whatever you prefer. What do ya wanna try?

— Reply to this email directly or view it on GitHub.

[jeremymansfield]

Any way to center the background video vs. left justified? Noticed when it expands out that it's flush left vs center orientation and expands both sides.

[nerdpruitt]

I threw that navy color from the first heading as a text shadow on the main headline. We'll want to stick to a solid color if you want to make it thick at all because we have to layer them to achieve that.

[nerdpruitt]

Oh, and so far as centering vs. left justified on the video really it’s neither. It’s just 100% width and height. I wonder if the window ratio is what affects what you see there. Working off my little 15 inch screen it’s kinda hard for me to tell :neutral_face: .

[jeremymansfield]

RE: Color Sounds good. My browser isn't refreshing yet, so I'm unable to tell. Attached is all I was thinking if it works, but open to whatever.

[nerdpruitt]

What size is that shadow in PS?

[jeremymansfield]

RE: video centering Yeah, I just got a 27" monitor for the first time in December, so I'm finally set free :) Essentially, the flamenco dancer woman is dancing off to the screen at the right, so when I expand out, I can see all of her. So it seems the video is left justifying and clinging to the left side of the browser. Not sure what can be done about it, but thought I'd ask.

[jeremymansfield]

Try this:

-webkit-box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.3);
box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.3);

http://www.cssmatic.com/box-shadow

[nerdpruitt]

Perfect...just uploaded it.

I think the video filling the height of the browser is what's messing with it. That forces it to be a certain width to maintain the aspect ratio.I think it would have to change so the width was always 100% and the height is relative according to the aspect ratio.

@jacobfentress any thoughts on this? Does that sound right to you?

[jeremymansfield]

Definitely want it to fill like you had it to ensure nothing gets cut off. But glad to know it doesn't necessarily work like I had hoped.

[nerdpruitt]

Note to self: Try adding this for centering on resize

    @include legacy(false) {
      left: 50%;
      top: 50%;
      transform: translateX(-50%) translateY(-50%);
    }

You might have to remove the fixed and the mq for height as well. And maybe try it inside an absolutely positioned div with %cover for some of the height issues.

[jeremymansfield]

Here's what it's doing on mine when I make my browser more square on my 27" monitor, just as an fyi ...

[nerdpruitt]

Okay, it should fill the height and center now - tested on Browserstack with a 1200px height.

https://github.com/brandaid/dancenetwork/commit/bdaeba4e8431c0868bf3c298910eb66f551b6c48