HTML5 Video 2 – customizing with CSS



//HTML5 video tag
  1. <video width='700' height='520'  controls preload='none' class='videocustomozing'>
  2.    <source src='http://www.xflux.us/doc/html5video/dragon.ogg' type='video/ogg' />
  3.    <source src='http://www.xflux.us/doc/html5video/dragon.mp4' type='video/mp4' />
  4.    <object width='700' height='520' type='application/x-shockwave-flash' data='http://kevinwiliarty.com/openvideo/player-viral.swf'>
  5.    <param name='movie' value='http://kevinwiliarty.com/openvideo/player-viral.swf' />
  6.    <param name='flashvars' value='image=http://www.xflux.us/doc/html5video/dragon_x264.&file=http://www.xflux.us/doc/html5video/dragon_x264.mp4' />
  7.    </object>
  8. </video>
//CSS3
  1. <style type="text/css">
  2. .videocustomozing {
  3.    width: 650px;
  4.    height:490px;
  5.    border:3px solid #aaa;
  6.    background:#aaa;
  7. }
  8. .videocustomozing:hover,
  9. .videocustomozing:focus {
  10.    z-index:0px;
  11.    width: 650px;
  12.    height:490px;
  13.    border:3px solid #fff;
  14.    background:#fff;
  15.    -o-box-shadow: inset 0 1px 10px #fff, inset 0 -25px #fff, 0 0 10px #fff;
  16.    -webkit-box-shadow: inset 0 1px 10px #fff, inset 0 -25px #fff, 0 0 10px #fff;
  17.    -moz-box-shadow: inset 0 1px 10px #fff, inset 0 -25px #fff, 0 0 10px #fff;
  18.    box-shadow: inset 0 1px 10px #fff, inset 0 -25px #fff, 0 0 10px #fff;
  19. </style>

Comments are closed.

© 2018 xFlux, Theme designed by xFlux. | Send Email