Video Datei mit Kontrollleiste und Fallback per Iframe
Video Datei mit Kontrollleiste und Standbild und Größenangabe
Wer noch etwas gestalten möchte kann dies im CSS Bereich machen
CSS
- video
- {
- /* basic border */
- border: 1px solid #ccc;
- padding: 20px;
- margin: 10px;
- border-radius: 20px;
- /* add regular background */
- background-color: #ffcccc;
- /* add gradient background */
- background-image: -moz-linear-gradient(top, #fff, #fcc);
- background-image: -webkit-linear-gradient(top, #fff, #fcc);
- background-image: -o-linear-gradient(top, #fff, #fcc);
- background-image: -ms-linear-gradient(top, #fff, #fcc);
- background-image: linear-gradient(top, #fff, #fcc);
- /* now a shadow */
- -webkit-box-shadow: 0 0 10px #ccc;
- box-shadow: 0 0 10px #ccc;
- }
und vielleicht noch etwas beim Mouseover
Wer jetzt noch das Video drehen möchte (komplett mit farblicher Gestaltung)
CSS
- {
- /* basic border */
- border: 1px solid #ccc;
- padding: 20px;
- margin: 20px;
- border-radius: 20px;
- /* add regular background */
- background-color: #ffcccc;
- /* add gradient background */
- background-image: -moz-linear-gradient(top, #fff, #fcc);
- background-image: -webkit-linear-gradient(top, #fff, #fcc);
- background-image: -o-linear-gradient(top, #fff, #fcc);
- background-image: -ms-linear-gradient(top, #fff, #fcc);
- background-image: linear-gradient(top, #fff, #fcc);
- /* now a shadow */
- -webkit-box-shadow: 0 0 10px #ccc;
- box-shadow: 0 0 10px #ccc;
- /* now transform */
- -moz-transform: scale(0.5) translate(-100px, 0) rotate(90deg);
- -webkit-transform: scale(0.5) translate(-100px, 0) rotate(90deg);
- -o-transform: scale(0.5) translate(-100px, 0) rotate(90deg);
- -ms-transform: scale(0.5) translate(-100px, 0) rotate(90deg);
- transform: scale(0.5) translate(-100px, 0) rotate(90deg);
- }
- video:hover, video:focus
- {
- /* add glow */
- -webkit-box-shadow: 0 0 20px #f88;
- box-shadow: 0 0 20px #f88;
- /* rotate and move video */
- -moz-transform: scale(1.0) translate(0) rotate(0deg);
- -webkit-transform: scale(1.0) translate(0) rotate(0deg);
- -o-transform: scale(1.0) translate(0) rotate(0deg);
- -ms-transform: scale(1.0) translate(0) rotate(0deg);
- transform: scale(1.0) translate(0) rotate(0deg);
- }