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

    Gulp : How to copy multiple files and keep the folder structure

    How do I add a css class to an Div element in JQuery?

    How to manage custom CSS?

    Paragraph Span Class and h3 Are The Same Hex Code, But Are Showing Up As Different Colors

    Drag and drop in AngularJS: make a directive that is a drop zone, showing an overlay when dragging

    html web shows header only in mobile view

    How to edit a css file in ASP.NET using C# to change the website design

    How do I style a different border?

    how to set css for html page opened by 'appAPI.openURL' in crossrider

    how to create bar code like in a horizontal line using css (For Email)

    How do I programmatically change the CSS link for HTML files in C#?

    CSS: Image is stretched to square, how to crop it?

    How to make IE support min-width / max-width CSS properties?

    how to align 5 div side by side in center using css?

    how to set part of circle as background in css

    How to center jqPagination widget?

    How to avoid CSS interference in an HTML page

    How to organize html and css to do this UI design with responsive design

    How to make <'details'> drop down on mouse hover

    How to create HTML/CSS menu 100% width where text goes to the edges?

    How to reset input element style

    CSS : How to add an absolute div to a scrollable background? [closed]

    How to set align of elements to center with css?

    Understanding how Flexbox works with Bootstrap

    css - How to make the view window grows while the user zooms in?

    Duplicated footer html/css on another page, but shows up differently?

    How can I change the text decoration on numbers only on my web page?

    Link on Link - How to activate JS code without parent link activation?

    How can i setup my php code to change my CSS background picture daily [closed]

    How to scale canvas and keep its position on screen?