I just re-uploaded my iWeb site to a new host and see that my videos are now cropped differently than within the application. Hovering shows the discrepancy. All of them were shot with an HD camera, so presumably the original aspect ratio is 16:9.
Why are they not playing as such online and how can I fix it (the images are no longer framed well).
This is online:
And this is in iWeb:
Thanks for you help!
Who not show the real thing?
Provide the URL to the page.
Why would the URL help diagnose? The screen shots show the difference in the aspect ratio between the original video and how it is showing up online - with the empty "space".
I figured this must happen to others, although I find it confusing that it is only now happening to me - with the new host....
It has nothing to do with your camera, your HD movie or the proportions.
It's a bug in Firefox and related browsers (on the right) that moves the picture down and compresses it. It displays normal without the controller (try it) :
Today newer code is used. Here's a page with sample code you can use :
http://responsive.2kool4u.net/video/resp/
And here are the basics :
To see how it looks in iWeb :
http://wyodor.byethost8.com/responsivevideo/Responsive_Video.html
Here's the HTML Snippet (resize the page to scale the movie):
http://wyodor.byethost8.com/responsivevideo/Responsive_Video_files/widget1_marku p.html
Look a the source to see how it's done.
Thank you so much, Wyodor! I googled the problem and didn't find any discussions about it. I guess I haven't been paying enough attention to the site to see how the videos have been playing.
I checked out your examples and references - not having ever hacked iWeb, I am questioning what you recommend I try. Add an html snippet to each page containing a video with the code <div id="player"> - </div>, from your example?
I am also wondering if I should just embed a Vimeo link - I understand this will work if one publishes to a desktop folder and use a stand alone ftp program (I use Fetch), although I haven't done much research into it.
In either case you have to use the HTML Snippet.
You copy the shared code at Vimeo and paste it in a HTML snippet.
Thank you again, Wyodor. I entered this:
<div id="player">
<canvas width="528" height="297"></canvas> <video controls width="528" height="25"> [Fiddled with this as you had controls that were as high as your canvas - not sure I like the new controls - default nicer and with fast forward etc]
<source src="../seta/SetaSkincare.mp4" type="video/mp4">
<source src="../seta/SetaSkincare.webm" type="video/webm">
<source src="../seta/SetaSkincare.ogv" type="video/ogg; codecs=theora, vorbis">
</video>
[with and without what you had here]
</div>
And, in both instances, got something that looked somewhat right on the page except it wouldn't publish (and I have no idea what "mwmac.png" is).
"Can’t create the file “mwmac.png.” The disk may be damaged or full, or you may not have sufficient access privileges."
iWeb videos aspect ratio different online
