Skip navigation
FundraisingGuru
Currently Being Moderated

Resizing mp4 video to fit area on web page

Sep 4, 2013 7:08 PM

I have inserted a video onto the home page and the video plays ok, but it's too big for the area allocated and so you can only see part of the video. How do I resize it to fit?

 

<OBJECT CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"

CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab" WIDTH="448" HEIGHT="254" >

                <PARAM NAME="src" VALUE="CLC_Video.mp4" >

                <PARAM NAME="autoplay" VALUE="true" >

                <EMBED SRC="CLC_Video.mp4" WIDTH="448" HEIGHT="254" TYPE="image/x-macpaint"

PLUGINSPAGE="http://www.apple.com/quicktime/download" AUTOPLAY="true"></EMBED>

              </OBJECT>

 
Replies
  • Currently Being Moderated
    Sep 4, 2013 7:36 PM   in reply to FundraisingGuru

    Have you tried modifying the width and height attributes in the code you provided?

     

    best,

    Shocker

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 4, 2013 8:57 PM   in reply to FundraisingGuru

    yesum, I seen it right there in the coding. That thar code looks pretty gnarly. Do you have a link so we allz can see what else might be making your video janky?

     

    best,

    Shocker

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 4, 2013 10:02 PM   in reply to FundraisingGuru

    I get a white box too.

     

    As a suspected, your site is not compliant to modern development standards (table layout, flash video, etc.). It does not make sense to continue working on such outdated coding. You should scrap your current design and build your site with modern web standards (div layout, html5 video, etc.).

     

    best,

    Shocker

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 5, 2013 1:13 PM   in reply to FundraisingGuru

    It's not hard to work with HTML5 and video.  Just copy & paste this code into a new, blank document.  SaveAs test.html. 

     

     

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>HTML5 with Video</title>
    
    <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    
    <style>
    
    /**this will re-scale in smaller viewports**/
         video {max-width:100%;}
    
    </style>
    </head>
    
    <body>
    
    <!--Add your videos below-->
    <video controls>
    <source src="YourVideo.mp4" type='video/mp4' />
     <source src="YourVideo.webm" type='video/webm' />
     <source src="YourVideo.ogv" type='video/ogg' />
    </video>
    <!--end video-->
    
    </body>
    </html>

     

    Replace YourVideo.ogg, .mp4 and .webm with your own video files. 

    NOTE:  You need all 3 file types to support various browsers and mobile devices.

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 6, 2013 7:05 AM   in reply to FundraisingGuru

    I've used this free converter with some succes in the past...

     

    http://www.any-video-converter.com/products/for_video_free/

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 6, 2013 8:41 AM   in reply to FundraisingGuru

    .mp4, .webm and .ogv each use different codecs and compression methods.  So you'll need to find a video file converter online.

     

    Your server may need to be configured to support the MIME file types.  If you're on a Linux server, you can usually do this with an .htaccess file in your root folder. 

     

    .htaccess for Audio / Video MIME file types:

     

    AddType audio/aac .aac

    AddType audio/mp4 .mp4 .m4a

    AddType audio/mpeg .mp1 .mp2 .mp3 .mpg .mpeg

    AddType audio/ogg .oga .ogg

    AddType audio/wav .wav

    AddType audio/webm .webm

    AddType video/mp4 .mp4 .m4v

    AddType video/ogg .ogv

    AddType video/webm .webm

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 7, 2013 9:53 AM   in reply to FundraisingGuru

    Please upload your media test page to your remote server and post the URL so we can take a look at it.

     

    Your root folder does not need to be changed.  Contact your hosting provider and ask them if your server supports .mp4, .webm and .ogv MIME file types.  If not, ask them to add them for you.

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 8, 2013 10:16 AM   in reply to FundraisingGuru

    Your video resizes as it should.  Simply drop the video into your home page div and it should work. 

     

         <video controls poster="/images/YourPosterFrame.jpg">

     

    Change path and filename to your video capture image.

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 9, 2013 11:32 AM   in reply to FundraisingGuru

    If you need more help, you need to post a link to your page.

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 9, 2013 7:36 PM   in reply to FundraisingGuru

    I use AppGeeker video converter (www.appgeeker.com), you can resize video files manually to fit web page perfectly if u want .

     

    Great piece of software recommended to me by an IT technician.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (1)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points