I’m trying to incorporate HTML video as a background for the homepage of a site. After a certain breakpoint (around 1000px width), the video doesn’t scale up to remain 100% width.
How can I ensure the video fills the width of the window no matter the size?
Thanks,
Jack
http://www.marcelogarciajj.com/
freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options
How large is the video? I think you may be hitting a wall of natural size.
Walter
On May 29, 2017, at 8:07 AM, Jack email@hidden wrote:
I’m trying to incorporate HTML video as a background for the homepage of a site. After a certain breakpoint (around 1000px width), the video doesn’t scale up to remain 100% width.
How can I ensure the video fills the width of the window no matter the size?
Thanks,
Jackhttp://www.marcelogarciajj.com/
freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options
freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options
On 29 May 2017, 1:15 pm, waltd wrote:
How large is the video? I think you may be hitting a wall of natural size.
Walter
The dimensions are 1280 x 720,
I think you are right, is there any way of ‘stretching’ the video to match the width of a window greater than 1280px wide?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options
You can add some manual CSS to the page to make a video grow to any size. Try adding this:
<style type="text/css">
video {
width: 100%;
max-width: 100%;
}
</style>
Put it in the Before section of the Page/HTML Markup dialog. If this works, then you can explore other ways to add this that aren’t so coarse. (I think you can build such a style with Freeway’s Styles palette, and then apply it to the video, so you don’t end up embiggening all of the videos on your site.)
Walter
On May 29, 2017, at 9:18 AM, Jack email@hidden wrote:
On 29 May 2017, 1:15 pm, waltd wrote:
How large is the video? I think you may be hitting a wall of natural size.
Walter
The dimensions are 1280 x 720,
I think you are right, is there any way of ‘stretching’ the video to match the width of a window greater than 1280px wide?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options
freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options
On 29 May 2017, 1:37 pm, waltd wrote:
You can add some manual CSS to the page to make a video grow to any size. Try adding this:
Put it in the Before section of the Page/HTML Markup dialog. If this works, then you can explore other ways to add this that aren’t so coarse. (I think you can build such a style with Freeway’s Styles palette, and then apply it to the video, so you don’t end up embiggening all of the videos on your site.)
Walter
On May 29, 2017, at 9:18 AM, Jack
I just tried this, doesn’t seem to have worked.
The video just remains tied to the top left hand corner of the window after 1280px and the black background fills the rest of the screen.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options
Could you post a link to the page?
Walter
On May 29, 2017, at 9:46 AM, Jack email@hidden wrote:
On 29 May 2017, 1:37 pm, waltd wrote:
You can add some manual CSS to the page to make a video grow to any size. Try adding this:
Put it in the Before section of the Page/HTML Markup dialog. If this works, then you can explore other ways to add this that aren’t so coarse. (I think you can build such a style with Freeway’s Styles palette, and then apply it to the video, so you don’t end up embiggening all of the videos on your site.)
Walter
On May 29, 2017, at 9:18 AM, Jack
I just tried this, doesn’t seem to have worked.
The video just remains tied to the top left hand corner of the window after 1280px and the black background fills the rest of the screen.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options
freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options
On 29 May 2017, 1:54 pm, waltd wrote:
Could you post a link to the page?
Walter
On May 29, 2017, at 9:46 AM, Jack
The website isn’t live yet, is there a way I can link you to it?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options
Publish the site into a sub-folder on your server, so you can send a link to yoursite.com/subfolder. You can delete it after we’re done dissecting it.
Walter
On May 29, 2017, at 9:55 AM, Jack email@hidden wrote:
On 29 May 2017, 1:54 pm, waltd wrote:
Could you post a link to the page?
Walter
On May 29, 2017, at 9:46 AM, Jack
The website isn’t live yet, is there a way I can link you to it?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options
freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options
On 29 May 2017, 1:58 pm, waltd wrote:
Publish the site into a sub-folder on your server, so you can send a link to yoursite.com/subfolder. You can delete it after we’re done dissecting it.
Walter
On May 29, 2017, at 9:55 AM, Jack
Problem is I don’t have access to the server yet as I’m building this site for a client, once they’re happy with the aesthetics then I will be sorting out the web hosting side of things.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options
Yes, but presumably you have a site (and server) of your own…
Walter
On May 29, 2017, at 10:01 AM, Jack email@hidden wrote:
On 29 May 2017, 1:58 pm, waltd wrote:
Publish the site into a sub-folder on your server, so you can send a link to yoursite.com/subfolder. You can delete it after we’re done dissecting it.
Walter
On May 29, 2017, at 9:55 AM, Jack
Problem is I don’t have access to the server yet as I’m building this site for a client, once they’re happy with the aesthetics then I will be sorting out the web hosting side of things.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options
freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options
On 29 May 2017, 2:04 pm, waltd wrote:
Yes, but presumably you have a site (and server) of your own…
Walter
On May 29, 2017, at 10:01 AM, Jack
Unfortunately not.
From what I can understand with this issue though, the video hits a wall both vertically and horizontally.
Is there a way of stretching the original video file (even if at the cost of quality)?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options
If you have an application like Final Cut, or maybe even the QuickTime Player app bundled with macOS, you can export a given video file at a larger pixel dimension. But that will be a larger (file-size) file coming out. That’s almost certainly not what you want.
Let’s attack this another way. In Freeway, go into the File / Preview in Browser / Browser Setup dialog, and set a plain-text editor as one of your browsers. Ideally, this should be a real programmer’s editor, like TextMate or BBEdit. BBEdit has a free mode (not even a time-bomb) so that’s probably your cheapest avenue toward this. After you select BBEdit as one of your browsers, you can then use the Preview in Browser / BBEdit menu item to open the generated HTML in BBEdit. Copy all of that text, and then visit https://gist.github.com and paste. Press the save button, then copy the URL of the resulting page and paste it here. That at least will let us see the HTML, and maybe there is something there preventing the 100% from meaning what you think it should.
Walter
On May 29, 2017, at 10:08 AM, Jack email@hidden wrote:
On 29 May 2017, 2:04 pm, waltd wrote:
Yes, but presumably you have a site (and server) of your own…
Walter
On May 29, 2017, at 10:01 AM, Jack
Unfortunately not.
From what I can understand with this issue though, the video hits a wall both vertically and horizontally.
Is there a way of stretching the original video file (even if at the cost of quality)?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options
freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options
On 29 May 2017, 2:16 pm, waltd wrote:
If you have an application like Final Cut, or maybe even the QuickTime Player app bundled with macOS, you can export a given video file at a larger pixel dimension. But that will be a larger (file-size) file coming out. That’s almost certainly not what you want.
Let’s attack this another way. In Freeway, go into the File / Preview in Browser / Browser Setup dialog, and set a plain-text editor as one of your browsers. Ideally, this should be a real programmer’s editor, like TextMate or BBEdit. BBEdit has a free mode (not even a time-bomb) so that’s probably your cheapest avenue toward this. After you select BBEdit as one of your browsers, you can then use the Preview in Browser / BBEdit menu item to open the generated HTML in BBEdit. Copy all of that text, and then visit https://gist.github.com and paste. Press the save button, then copy the URL of the resulting page and paste it here. That at least will let us see the HTML, and maybe there is something there preventing the 100% from meaning what you think it should.
Walter
On May 29, 2017, at 10:08 AM, Jack
Copied this to clipboard, is this what you need?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options
Oops… accidentally embedded it,
here’s the link
freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options
This works fine. Given the way you are designing this element, the percentage setting that I suggested is not going to have any effect.
You’re going to need to get this video out of the sizing it’s being given, and rather than doing the “shift left on smaller screens” semi-responsive trick you are using, set the video to width 100% and no height property at all. That will force the video to be the full width of the screen always, with variable height.
If you want it to completely fill the screen, then take a look at my Video Background Action: http://actionsforge.com/actions/videobackground I have not tested this in Freeway 7’s responsive design mode, but it should work (by ignoring that whole feature).
Walter
On May 29, 2017, at 10:26 AM, Jack email@hidden wrote:
Oops… accidentally embedded it,
here’s the link
freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options
freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options
On 29 May 2017, 2:47 pm, waltd wrote:
This works fine. Given the way you are designing this element, the percentage setting that I suggested is not going to have any effect.
You’re going to need to get this video out of the sizing it’s being given, and rather than doing the “shift left on smaller screens” semi-responsive trick you are using, set the video to width 100% and no height property at all. That will force the video to be the full width of the screen always, with variable height.
If you want it to completely fill the screen, then take a look at my Video Background Action: http://actionsforge.com/actions/videobackground I have not tested this in Freeway 7’s responsive design mode, but it should work (by ignoring that whole feature).
Walter
On May 29, 2017, at 10:26 AM, Jack
This is how I had originally formatted the Video, problem with this is the video doesn’t fill the screens of mobile devices, instead you get the entirety of the video shown, but loads of black space above and below the video - hence the semi-responsive trickery to keep the video centered.
I’m going to try using your action and I’ll let you know what happens.
Thanks for your continued help
freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options
HI,
the action works really well and the video stays 100% width no matter the size. thanks so much,
one small issue arises when shortening the width of the window to the size of a mobile device, the right hand-side of the video displays rather than the centre. is there a fix for this?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options
Are you seeing this in a real mobile device, or just in a browser squashed in width? They are not always exactly the same in my experience.
Walter
On May 29, 2017, at 11:14 AM, Jack email@hidden wrote:
HI,
the action works really well and the video stays 100% width no matter the size. thanks so much,
one small issue arises when shortening the width of the window to the size of a mobile device, the right hand-side of the video displays rather than the centre. is there a fix for this?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options
freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options
On 29 May 2017, 3:27 pm, waltd wrote:
Are you seeing this in a real mobile device, or just in a browser squashed in width? They are not always exactly the same in my experience.
Walter
On May 29, 2017, at 11:14 AM, Jack
The latter,
either way its not a major problem, it still looks great in every other width.
thanks a lot for all your help walter
freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options
Hi Walter, videobackground is a great action. Is there a way to constrain the video in a box, as on this website? Lycée Français de New York | Private Bilingual School in NYC Thanks.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options