Help me please

Hi there Freeway people,

What I want is a full screen video that fits on every browser, without a control bar. The problem is that I don’t have any money to buy the new updated version of Freeway 6, so I can’t use HTML5 (right?).

Is there a possibility that creating a full width video (100%) also works without HTML5? Because I have tried and tried, but every time there are new problems. When I put the video in as a Quicktime player file, and the page is on centered, 100%, it still doesn’t fit the whole screen. Also with the align to none it still doesn’t stretch full out (I have the video on fixed in window, and the rest of the page will slide “over” the video). Anyway, there are just a lot of problems with it.

Can anyone please make a small demo thingy that will show the full width video and can you then please send the document of the Freeway file?

I hope that I have explained my problem well enough for you to understand (my English is not great) and I hope you can take the time to help me out here :slight_smile:

Best regards and many thanks,
Steijn


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Okay, so nobody else stepped up to this yet. Here’s an off-the-top-of-my-head set of directions for Freeway 5.x to get this same result.

  1. You will need the HTML5 Actions and Upload Stuff Action from ActionsForge.
  2. Make your page XHTML (using the output tab of the Page Inspector), and remove any previous attempts at placing video on the page.
  3. Apply the HTML5 Page Action to the page. There are no options to be set here.
  4. Use Upload Stuff to select your poster image (yourMovie.jpg), and the MP4, Ogg, and WebM versions of your video. Set them to upload to the Resources folder. Make sure these are small (the CSS will scale them up) because large video will cause your page to load slowly.

Now, the next part is all done in the Page/HTML Markup dialog. Open that, and move to the Before section and paste in this style block:

<style type="text/css" media="screen">
#videobackground { 
  position: absolute;
  bottom: 0px; 
  right: 0px; 
  min-width: 100%; 
  min-height: 100%; 
  width: auto; 
  height: auto; 
  z-index: 0; 
  overflow: hidden
}
</style>

Then, switch to the After section, and paste in this HTML:

CRITICALLY IMPORTANT!

You MUST edit the HTML to match the actual filenames of your movie and still files, and if you don’t have an Ogg or WebM version of your movie, then realize that Firefox and Chrome users (respectively) will only see your JPG still version of the background. Further, Firefox will overlay a gray tint and the words, “No codec available for the provided video format” or something like that, which is very icky. So get a copy of Miro Converter (free) and make some Ogg and WebM conversions from your original MP4 video.

Now upload this to your server and visit the page in a browser. You should see the video fill the screen, and the video should start playing as soon as enough data has been transmitted to your browser from the server.

Walter

On Sep 1, 2013, at 6:42 AM, Steijn wrote:

Hi there Freeway people,

What I want is a full screen video that fits on every browser, without a control bar. The problem is that I don’t have any money to buy the new updated version of Freeway 6, so I can’t use HTML5 (right?).

Is there a possibility that creating a full width video (100%) also works without HTML5? Because I have tried and tried, but every time there are new problems. When I put the video in as a Quicktime player file, and the page is on centered, 100%, it still doesn’t fit the whole screen. Also with the align to none it still doesn’t stretch full out (I have the video on fixed in window, and the rest of the page will slide “over” the video). Anyway, there are just a lot of problems with it.

Can anyone please make a small demo thingy that will show the full width video and can you then please send the document of the Freeway file?

I hope that I have explained my problem well enough for you to understand (my English is not great) and I hope you can take the time to help me out here :slight_smile:

Best regards and many thanks,
Steijn


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi there Walter,

Thanks a lot for your help!

However, even though I did everything you said, I can’t see the video. There is just white space (it’s like the video isn’t there). Altough, when I upload it to my website, it does say that it’s uploading the video’s, however I can’t see them on the website either.

Any help?

Thanks and best regards,
Steijn


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

By the way, the website is called: http://www.skyframes.nl/ (it’s not done yet)


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Any help?

If you can share a link to your web page online we can probably work out where you have gone wrong.

Without a link we can only guess.

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

On 1 Sep 2013, 8:19 pm, DeltaDave wrote:

Any help?

If you can share a link to your web page online we can probably work out where you have gone wrong.

Without a link we can only guess.

David

The website I am making is called http://www.skyframes.nl/ (it is not done yet)


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

However, even though I did everything you said…

Noop - you didn’t. Cause if you would have done as recommended, you would see a result.

First point:

DOUBLE (or even triple) check the differences between Walters’ shared code-snippet and what you did in your code (doubled quotes as the key-word).

Furthermore I doubt (cause I can’t double-check) if the videos are really on its place.

All the rest on this page I can’t figure out cause behind the initial PageDiv, there is a form-action followed by the native page content - this is curious but you have for sure reasons for.

Cheers

Thomas


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Here you go

http://www.deltadesign.co/FW6Test/skyriser.html

Note that in your page you have some curly quote marks(”) - obviously copied from here and they should be straight ones (")

Go through the code and change them too this

<video id="videobackground" poster="Resources/LogoGroot.jpg" preload muted autoplay> <source type="video/ogg" src="Resources/Skyframes-1.oggtheora.ogv"/> <source type="video/webm" src="Resources/Skyframes-1.webmvp8.webm"/> <source type="video/mp4" src="Resources/Skyframes-1.mp4"/> </video>

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Can I just add that background video is perfectly acceptable but to me background sound that I cannot turn off easily (without turning my computer sound off) is not.

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thank you for your comments!

It works now, but it is zoomed in or something?

Please check http://www.skyframes.nl/ you will see that only a part of the movie is being showed.

Best regards,
Steijn


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

On 1 Sep 2013, 9:28 pm, DeltaDave wrote:

Can I just add that background video is perfectly acceptable but to me background sound that I cannot turn off easily (without turning my computer sound off) is not.

D

Yes I know, I am probably going to put a new video there without the sound. Do you know how I can make a seperate button (in top right corner) that can enable and disable the sound? Like on: Spotify - Web Player: Music for everyone

Oh and just now I realized that when I preview it in browser, it does work, but not on my explorer when I type in the website. How can this be possible?

Thank you and best regards,
Steijn


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

but not on my explorer when I type in the website.

Works for me in Safari desktop but not on iPhone or FireFox and very jerky in Chrome.

Personally I dont think this is going to work on a one page site like this. Apart from not having any real content on page load unless you scroll, when you do scroll the video obscure the content.

Also I would suggest that you use a top left origin

 position: absolute;
  top: 0px; 
  left: 0px; 

I think I would recommend you look at fitvid.js http://fitvidsjs.com/ and see if you can work with that.

But of course this is really designed for a responsive site - which yours is not.

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Yeah, I figured that out as well. I am now probably going to make something like Page not found - Spotify. Altough I know splash websites aren’t very good for Google, I am not really going to use it for people searching it on Google, it’s more of a website to be put on business cards and so that people can see it (it’s for people who know about the company). Any ideas of how I should make something like the Spotify splash website, with the enable/disable sound button on the top right corner and the full screen video. Did they use HTML5 for that website? Or did they use the same principal as explained in all the above comments.

Also, when I go on my mobile to that specific website, there is a slideshow instead of a video perfectly fitting the screen (which is very well worked out in my opinion). How do I do that?

I hope that I can replicate something like that website (when I click on “Read more” the clicker goes to the actual website). Of course I am not going to completely replicate it :stuck_out_tongue_winking_eye:

Any thoughts?

Best regards and many thanks to all the people helping me out here :wink:

Steijn


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Can I also suggest that you reconsider the width of your site - at 1200px it is probably not ideal especially when viewing on a mobile device.

But of course you may be considering using the Mobile (iPhone) Redirect action for those users.

As far as the Spotify splash page goes, that appears to use javascript to make it all work.

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

The CSS that I posted makes the video fill the entire page. If your page is roughly the aspect ratio of the video, then you won’t see much zooming. If you want to make a simple change and have the video fill the browser window (which will usually be roughly video-shaped) but not scroll with the page, then change the line

position: absolute;

to read

position: fixed;

and that will make the video fill the browser window, not the page. This should be the only change you need to make the video more normally-sized.

Any background that you create like this needs a few basic things to ensure that your visitors aren’t inconvenienced.

Removing sound will make the file size smaller, so that’s a win in overall usability. Basic UX rule: only start sound in response to an explicit user click on a well-labeled control. Visit http://decemberists.com for a nice example. There is never any excuse for playing sound on a Web page by default. If your clients insist, remind them that every time you do that, God kills a kitten. Seriously.

Second, make sure the total file size of the video is as low as you can make it. This means a small video in pixels and megabytes and duration. It also needs to have low contrast and low detail, both of which will be incredibly distracting while a visitor tries to read any foreground content centered over the movie. Wispy clouds moving in the background == good. Attractive models in Tartan plaid == bad. (Well, bad for a background.)

Finally, make sure you have made the Ogg and WebM versions for Chrome and Firefox, and that you have properly coded all of the links to these files. You really cannot skip this step, since there is no Flash fallback here. Oh, and forget about Internet Explorer < 10 for this style of background. Realize that they will see the still image only. So that means a further fallback is needed to cover those browsers:

In CSS, add this rule before the closing :

#videobackground img {
	height: auto !important;
	width: auto !important;
	min-height: 100% !important;
	min-width: 100% !important;
}

In HTML, add the image as a last-ditch fallback:

<video id="videobackground" poster="Resources/yourMovie.jpg" preload muted autoplay>
	<source type="video/ogg" src="Resources/yourMovie.ogv"/>
	<source type="video/webm" src="Resources/yourMovie.webm"/>
	<source type="video/mp4" src="Resources/yourMovie.mp4"/>
	<img src="Resources/yourMovie.jpg" alt="Please consider upgrading your browser" />
</video>

Note how the image src is the same as the poster attribute from the video, and is the last thing in the video container. Naturally, change the code above to match YOUR file names. The HTML5 Action will have taken care of adding the proper style rules through HTML5 Shiv to make IE8 and above handle the video element, so adding the image as the last fallback will make sure that something appears in those browsers as well. Standards-compliant browsers will ignore the image, since the way a video container works is the first thing that the browser can play, it will play, and will skip everything that follows.

Walter

On Sep 1, 2013, at 5:30 PM, Steijn wrote:

Thank you for your comments!

It works now, but it is zoomed in or something?

Please check http://www.skyframes.nl/ you will see that only a part of the movie is being showed.

Best regards,
Steijn


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Try this:

http://actionsforge.com/actions/view/304-videobackground

Walter

On Sep 2, 2013, at 1:31 PM, Walter Lee Davis wrote:

The CSS that I posted makes the video fill the entire page. If your page is roughly the aspect ratio of the video, then you won’t see much zooming. If you want to make a simple change and have the video fill the browser window (which will usually be roughly video-shaped) but not scroll with the page, then change the line

position: absolute;

to read

position: fixed;

and that will make the video fill the browser window, not the page. This should be the only change you need to make the video more normally-sized.

Any background that you create like this needs a few basic things to ensure that your visitors aren’t inconvenienced.

Removing sound will make the file size smaller, so that’s a win in overall usability. Basic UX rule: only start sound in response to an explicit user click on a well-labeled control. Visit http://decemberists.com for a nice example. There is never any excuse for playing sound on a Web page by default. If your clients insist, remind them that every time you do that, God kills a kitten. Seriously.

Second, make sure the total file size of the video is as low as you can make it. This means a small video in pixels and megabytes and duration. It also needs to have low contrast and low detail, both of which will be incredibly distracting while a visitor tries to read any foreground content centered over the movie. Wispy clouds moving in the background == good. Attractive models in Tartan plaid == bad. (Well, bad for a background.)

Finally, make sure you have made the Ogg and WebM versions for Chrome and Firefox, and that you have properly coded all of the links to these files. You really cannot skip this step, since there is no Flash fallback here. Oh, and forget about Internet Explorer < 10 for this style of background. Realize that they will see the still image only. So that means a further fallback is needed to cover those browsers:

In CSS, add this rule before the closing :

#videobackground img {
height: auto !important;
width: auto !important;
min-height: 100% !important;
min-width: 100% !important;
}

In HTML, add the image as a last-ditch fallback:

Note how the image src is the same as the poster attribute from the video, and is the last thing in the video container. Naturally, change the code above to match YOUR file names. The HTML5 Action will have taken care of adding the proper style rules through HTML5 Shiv to make IE8 and above handle the video element, so adding the image as the last fallback will make sure that something appears in those browsers as well. Standards-compliant browsers will ignore the image, since the way a video container works is the first thing that the browser can play, it will play, and will skip everything that follows.

Walter

On Sep 1, 2013, at 5:30 PM, Steijn wrote:

Thank you for your comments!

It works now, but it is zoomed in or something?

Please check http://www.skyframes.nl/ you will see that only a part of the movie is being showed.

Best regards,
Steijn


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options