how to Resize Quick TIme Player to the size of an HTML/CSS DIV


Tags: javascript,html,css,quicktime

Problem :

I am using Quick time via javascript so that I can play video on my web browser. I want to resize the video so that it fits the size of the DIV. The problem is that when the player launches the video the size of the DIV remains the same but the player gets out of the DIV. I want the size of the DIV remain the same doesnt matter if the player can not be fully shown or resized.



Solution :

How are you setting the size of the player? If you set the <object> width and height attributes to a certain number of pixels it should respect that. Whilst you can set width: 100%; with CSS, if that makes it resize with a liquid layout many plugins won't resize themselves after loading.

Unless you absolutely must play back old-school .mov files, I would strongly recommend avoiding the embedded video players today, and especially QuickTime which many Windows users will not have. Video on the web today is primarily done with Flash players. HTML5 <video> with fallback to Flash is nice to have for the newer browsers.


    CSS Howto..

    How do I change a specific css element with javascript?

    How to convert this CSS animation to use GPU level, instead of updating layer tree

    How to select siblings between 2 tags of same class using CSS

    How to achive this design CSS

    How do you make a floated element fill the remaining horizontal space when it is between its fixed width siblings?

    How to center image which is bigger than screen?

    How to create a custom scrollbar on a div (Facebook style)

    How can I get this chart to display next to data table in CSS?

    How to create rolldown content with css?

    ckeditor - how to get custom-css with id to work?

    How do i set 100% in a div tag background?

    How to create CSS styled dom element inside Google Maps InfoWindow?

    How apply CSS to browse button

    Foundation Framework: How can I get multiple links in a mobile drop-down to be horizontally aligned and not stacked?

    How to combine Background Image and CSS Gradient

    How to prevent corners on CSS box-shadow?

    How to nest classes in css modules and react?

    How to make a full page JS and CSS menu

    How to dynamically create CSS class in IE8

    How to center align

    How to apply css style when using ng-print inAngular JS

    How to make a smooth dashed border rotation animation like 'marching ants'

    drupal themes: how do I include several css files / js files on my theme's .info file?

    How to Position an Image underneath a form in CSS

    How to set browser full width navigation?

    How can I create this centered header with multiple colors?

    CSS how to postiton div outside main container without it moving over the container on window re-size? [closed]

    How make something like Facebook Notifications?

    How to apply gradient to element with correctly display in IE9?

    How to animate DOM elements with JavaScript/CSS