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. }
  6.  
  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.

 

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s