Styling media players with CSS3

example horse:

JS Bin.

Resizing and rotating a video as the mouse pointer comes over it

See this example online

The interesting part is that we use a 100% standard (and really small and simple) JavaScript code here to handle the window resize events and we just set regular CSS properties width and height of the video element, to resize the video.

Example 1: with a regular video

SIMPLE Full screen video:

  1. body {
  2.   margin:0;
  3.   padding:0;
  4.   overflow:hidden;
  5. }
  7. video {
  8.   width:100%;
  9.   height:auto;
  10. }

Example 2: with a YouTube video

full screen video with CSS effects

This time the video is zoomed in so that it’s much bigger than the browser’s window. When we resize the browser, the part of the video that is visible adapts itself. It’s not “real resize” of the video.

Try the example and read the explanation in an article by Dudley Storey. Also available as a simplified JsBin example.



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s