WWB on a Linux Desktop PC

[alex4orly]

This looks familiar.

Still, don't know what to do about the full screen YouTube video clip to start automatically on page loaf

https://squadron-125.org.il/BGvideo.html

Any tips?

Thanks

[Pablo]

Some browsers do not allow videos with audio to automatically start.
A possible solution is to remove the audio.

Note that this is unrelated to the software. It's a browser policy.
https://developers.google.com/web/updat ... cy-changes

[alan_sh]

I tried using the YouTube object in full screen for a background video
I set it for auto-start, but - it just loads and waits for clicking the Arrow to start

https://squadron-125.org.il/BGvideo.html

What can I do?

Cheers

I thought most browsers disabled autostart.

Alan

[rogerl]

Hi Alex,
There is a way around this but really need to see how you setup your page.
My way around this is to insert this code so an auto click on the video object / play button is executed after the page loads:

Code: Select all

<script>
$(document).ready(function()
{
$("#<id of video object or play button>").trigger('click');
});
</script>

[betwixt]

Going back to the original topic, it is down to personal preferences which OS you use. I started with Unix, then OS/2, then Windows and finally switched permanently to Linux. I haven't looked back and being honest, the thought of using Windows again horrifies me.

WWB in Crossover looks just like it would in Windows, but without the costs and hassle. Quick'n'easy in Linux looks very similar to WWB although some of the functionality is in different places, for example in drop down menus instead of panels at the side but it is highly configurable and Pablo has done a wonderful job of making programs as compatible as possible. Don't think of it as an older 'undeveloped' version of WWB, it has all the essential features including FTP, responsive sizing and many extensions, lots of them identical to the Windows ones.

Brian.

[alex4orly]

Hi Rogerl

Yes, I thought about something like that, tried also all sorts of otherthings I found around.
It seems however that the Browser is blocking such an option

Thanks

[alex4orly]

Hello Brian,

OK, I created some space on my Surface Pro 3 Windows 10 and managed to install Umbutu 20.04

1) It really looks very much like an Apple Desktop
2) So, I downloaded a utility and made it look like Windows 10, my personal preference for now

I am researching some "Must have tools" and hope to find what I need (Outlook look-alike is one of them)

Thanks for your help

Alex

[rogerl]

On reflection I have it working on html5 video not youtube. Another challenge!

[alex4orly]

I tried that, the video :

1) Doesn't start - just shows as a frozen image of the video
2) It doen't fill up the browser, but shows in either 4:3 or 16:9

I am using this as a background video for the website

I much prefer to have the video clip itself located within my website instead of pointing to a YouTube clip

Please send me maybe a page example, on how to do it

Thanks
Alex

[pajadt]

Hi Alex
To work autoplay video only can if convert him in Htnl 5 video / mp4 format. than you can have autoplay when page load

Video must be upload to web separate and use absolute link path

[rogerl]

Here is some basic stuff from W3 schools

Code: Select all

CSS:
Insure 16:9 video or add appropriate background to page to cover white spaces

<style>
/* Style the video: 100% width and height to cover the entire window */
#myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
}

/* Add some content at the bottom of the video/page */
.content {
  position: fixed;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #f1f1f1;
  width: 100%;
  padding: 20px;
}

</style>

HTML:
insert html object on page, insert html:

<!-- The video -->
<video autoplay muted loop id="myVideo">
  <source src="something.mp4" type="video/mp4">
</video>
<!-- Optional: some overlay text to describe the video -->
<div class="content">
  <h1>Heading</h1>
  <p>Lorem ipsum...</p>
</div>

insert file publisher object
add file something.mp4

preview and see what happens

Hope that helps.

[alex4orly]

Sorry Roger
I have no experience with CSS code.
Will help if you can point me to a html complete page that I can see the entire code of how to use it.

My MP4 video clip is located in the root of the site. Can I use the web HTML5 video object? This will be my preferred option.

Thank you
Alex

[pajadt]

|Nice code rogerl
Anyway youtube anyway work in Layoutgrid autoplay only not have sound, is setup 100 Vh he be full with, but if try to be 100% with 100% than must setup video for that size in one of video editor app. to get that example 1920 x 1080

- i Nor know is need Alex sound or only video like background without sound
if not here project wbs
https://gofile.io/d/GwfLEq

Also if use HTML5 video from root, yes u can use only give path

[rogerl]

CSS is how we style the objects on the page. We can add our own styling by inserting CSS via the ribbon menu under Page>Page Html>Between <head> / </head> tags then paste the CSS code in there and click okay.
If you already have your video in place then you won't need the file publisher but you will need to change the something.mp4 to your actual file name. Having said that, by not using the file publisher you won't be able to preview locally.You will need to upload to server then test live.

[rogerl]

Hi Pajadt,
Just downloaded your example. Works well. I have not got into flexible grids etc as yet as came from the old school and have already re-written my site twice to cope with having to change software. Not having a project to work on now reduces the incentive to re-learn another way of doing things.

[alex4orly]

Hi pajadt

Yes, I downloaded the example project, works OK, but:
1) It is using a video clip on YouTube - I prefer to use a clip on my own site
2) In the project I am working now, there is no need for sound

Rogerl - Can you point me to a complete html page with your example of using HTML-5, I will prefer that

Thank you both
Alex

[rogerl]

Hi Alex,
On Pajadt's project, double click on the 3 column grid and where it gives the video address under tab "style", change that to your video details. Must be full site address to your video.
i.e.
https://www.yourwebsite.com/video.mp4

This way seems much easier than mine. I have uploaded an example to my test site addressing a video of mine. Note it is not a 16:9 video so not full width. see:
https://www.whiteshepherdsnz.com/NewSit ... index.html

Regards
Roger

[alex4orly]

Hi Rogerl

That works - https://squadron-125.org.il/BGvideo.html as per your suggestion.

But, the video is in 16:9 therefore, not filling the screen

In contrast, the RZ video background here : https://squadron-125.org.il/RZvideo.html

Shows it in full screen background, is there a way for me to fix it?

Cheers
Alex

[alex4orly]

Hello Brian,

I installed Ubuntu 20.04 on my Windows Surface Pro 3 on a seprate partition, added support for Windows
But, I tried adding language " Hebrew" - but no way for me to switch to that language
Also, it seems that the email client - Evolution doesn't manage to login to my GMAIL account...

Any suggestions?

Is it possible that the Windows theme is blocking me from switching language, the Hebrew in the Language list is grayed out

Cheers
Alex

[pajadt]

Hi Alex
as our friend Roger added the mp4 video, that's right now it remains the width that is necessary but it can't be given as an image to be a cover, for example if the video is shot upright, then it can't be horizontal unless it's arranged in to one of the video editors. So you take the arranged video to be the background.

Solution:
I would have to look at that video that is wide so we can arrange it to be suitable for the background, put that video somewhere to see what can be done

[alan_sh]

Hello Brian,

I installed Ubuntu 20.04 on my Windows Surface Pro 3 on a seprate partition, added support for Windows
But, I tried adding language " Hebrew" - but no way for me to switch to that language
Also, it seems that the email client - Evolution doesn't manage to login to my GMAIL account...

Any suggestions?

Is it possible that the Windows theme is blocking me from switching language, the Hebrew in the Language list is grayed out

Cheers
Alex

I tried Linux a few times but the big stumbling block for me was emails. Linux (Unix) has no email clients that I found which worked well with Office 365 - and as you have found, Gmail can be problematic too.

Alan

[BaconFries]

Hi Alex when you first installed Ubuntu 20.04 what was the primary language you set? English is generally the primary but at installation you can set others such as Hebrew. As it is greyed out it may explain why you cannot select. See the following that should help you.
https://help.ubuntu.com/stable/ubuntu-h ... ll.html.en
Using Gmail in evolution.
https://help.gnome.org/users/evolution/ ... nt.html.en
https://www.ubuntubuzz.com/2017/06/how- ... t.html?m=1

[rogerl]

Hi Pajadt,
I ran my vid through a converter and set to 1980 x 1080 but still don't get the full width.

[pajadt]

Hi Roger

obviously you mean when you resize the browser it shrinks and then you see black above and below.
See the allowfullscreen option, is basically when you switch to css it's auto width

so in that case must add short css code

Code: Select all

<style>
#LayoutGrid1-video video {
    width: auto;
}
</style>

but you have to keep in mind how you reduce the size of the browser then it will not see the whole video in width as well as on youtube.

Maybe that posible in some script to do or maybe have RZ where calculate size by browser
I talk about how to get like when use Youtube

[rogerl]

no, video is on server and it is 1980 x 1080. When I add your code video shifts to left and leaves one black space on right.

[alex4orly]

Well,
I copied the idea and uploaded my video clip to YouTube

https://squadron-125.org.il/BGvideo.html

It kind of works... BUT:

1) I don't like the idea of having it on YouTube, AND
2) Loop= 1, it does the loop, but between ending one round and starting the 2nd, there is an ugly black screen stop...

I hope there is a better option

Cheers

[alex4orly]

Hi Alex when you first installed Ubuntu 20.04 what was the primary language you set? English is generally the primary but at installation you can set others such as Hebrew. As it is greyed out it may explain why you cannot select. See the following that should help you.
https://help.ubuntu.com/stable/ubuntu-h ... ll.html.en
Using Gmail in evolution.
https://help.gnome.org/users/evolution/ ... nt.html.en
https://www.ubuntubuzz.com/2017/06/how- ... t.html?m=1

Hello my teacher

1) MY primary language is English, so I left it at installation time.
2) When it finished, I tried to add Hebrew by going through the process as described in the link - it remains Grayed out
3) In the installed languages, I have English, English(Australia), Canada, US ... at the end I have Hebrew
4) No joy here

Email, I tried Evolution, no go - so I decided to try Thunderbird, no go either

So, I installed Thunderbird on my Windows 10 Desktop machine - not a problem, works as expected
Same setup : https://squadron-125.org.il/thunderbird.jpg works on my desktop, but fails on Ubuntu.

So, what do you think?

Cheers
Alex

[rogerl]

We get "Video is Private" when we click on link.
If you have purchased the extension from RZ then why not use that? I have something similar for full size background images that I purchased when re-developing my site which worked well and eliminated the white spaces on mobiles. Don't mean to take over your thread just wanting to see an idea actually work without having to purchase an extension.

[alex4orly]

We get "Video is Private" when we click on link.
If you have purchased the extension from RZ then why not use that? I have something similar for full size background images that I purchased when re-developing my site which worked well and eliminated the white spaces on mobiles. Don't mean to take over your thread just wanting to see an idea actually work without having to purchase an extension.

Hi Roger,
I am conceptually agains extensions, I tried avoiding them if I can.
Each new version of WWB brings with it something new and from my own software development background, I know that I would "Fix" something and in the process screw up several other things....

I prefer, if I can to use whatever standard feautres I can find. In this case, this RZ extension works fine in WWB under Windows, but:
1) It takes it a long time to load (and I created a small resulution version to try and speed it up... but
2) This extension is not one of those listed as convertible option if I want to move to Linux, so then, what do I use?

I hope that maybe Pablo will consider in the next version update, to build this into the WWB HTML5 player

Cheers
Alex

[rogerl]

I agree its nice to have things standard. I can't see extensions causing you too much grief as they are using standard html and CSS with jquery and Java scripts
Have you tried just using the html5 video? I tried a test page using that as full screen, loop and mute without controls than placing other text objects on the page and it all seemed to work well.

[alex4orly]

Yes, I tried the HTML5 object, it is not going to full screen. The clip is 16:9, so the top and bottom parts of the browser are empty.

Do you have a page sample that you can point me to?
Where in the world are you?

I am in Australia

Cheers
Alex

[rogerl]

Hi Alex,
I'm across the ditch in good old NZ. Have a look at this:
https://www.whiteshepherdsnz.com/NewSit ... index.html
This is just the html5 video with text over top.

[alex4orly]

Hello to over the ditch...
That looks good, just took it a long time to start (I supose becasue the site is hosted in Israel...)
So, can you please me the setup?

Almost time for you to go to sleep

Cheers
Alex

[rogerl]

8pm, just waking up!
Probably more to do with the loading of the video and memory / processor. Only takes short time here and I'm running a I7 NUC with 16gb memory and SSD drives (a present to myself last year). That link is to my test site here in NZ. I borrowed your video.
Simple setup. New page, drag in html5 video object, double click on it, enter path to video file, set options, don't forget to tick box down bottom for full screen.
Insert other objects to suit such as text etc, apply any styling you require then preview.

[alex4orly]

8pm, just waking up!
Probably more to do with the loading of the video and memory / processor. Only takes short time here and I'm running a I7 NUC with 16gb memory and SSD drives (a present to myself last year). That link is to my test site here in NZ. I borrowed your video.
Simple setup. New page, drag in html5 video object, double click on it, enter path to video file, set options, don't forget to tick box down bottom for full screen.
Insert other objects to suit such as text etc, apply any styling you require then preview.

OK, my setup is also NUC i7 16MB, SSD... Windows 10 that I want to get rid of...

I created a new page : http://beleuramyhome.org.au/sq125.mp4 this points to one of my website here is AU
My setup is : Auto play, Loop, Mute audio, Fill entire browser window is ticked.

My end result looks - unlike yours

I must be missing something

???

[rogerl]

Have uploaded the project file to my test site so you should be able to download it and use to see what i did.

https://www.whiteshepherdsnz.com/NewSit ... deorl2.wbs

You will need to double click on html5 video object and input a new path to a video on your local system before previewing or publishing to your own server. Also you can delete the file publisher object as web builder will upload the video referenced in the html5 video object.
Re your link looks like just a link to a video rather than to a web page.

[alex4orly]

OK, this works - just don't understand why do I need to include the Publisher object?
This video clip is already on the website...

Hope you can explain this to me

Thanks for your help
Alex

[pajadt]

Hi Alex
When a file publisher is used and the video is not in the layout grid as a background, then it can be uploaded like this, because it is independent, it is outside any object. So it's easier then the video is added to the projected folder and the video path is added to the folder where it was projected, it's easier because you don't have to upload the video separately.

Since I didn't have some time to deal with this these days, today I watched and you can use Layer to design in front of the video to place three elements, it would be easier to know the look of the design and have an idea how to do it, Roger's idea to make the video special as the background is great


if you are interested I can share the project behind the layer in front, with the layout grid e z-index setting must add to be at front
Here is project with layout grid
https://gofile.io/d/Y2gVdW

[alex4orly]

Hi Alex
When a file publisher is used and the video is not in the layout grid as a background, then it can be uploaded like this, because it is independent, it is outside any object. So it's easier then the video is added to the projected folder and the video path is added to the folder where it was projected, it's easier because you don't have to upload the video separately.

Since I didn't have some time to deal with this these days, today I watched and you can use Layer to design in front of the video to place three elements, it would be easier to know the look of the design and have an idea how to do it, Roger's idea to make the video special as the background is great


if you are interested I can share the project behind the layer in front, with the layout grid e z-index setting must add to be at front
Here is project with layout grid
https://gofile.io/d/Y2gVdW

Hello again,

Thanks for your help in this matter, it is now resolved. It seems that just using the WWB HTML5 Video object works just fine. My mistake was that I didn't specify the clip format as 16:9 but left it as custome. I created a new page, without any grid or layer, here is a link to it:

https://squadron-125.org.il/home.html - it is a background video only, all the objects on the page are in front.
And the setup of the object is : http://www.beleuramyhome.org.au/htmlclip.jpg without any other object on this page

Thanks again
Alex

[rogerl]

Great to see it come together and we learn something new along the way.Thanks for your help Pajadt.
All the best
Roger

[alex4orly]

Great to see it come together and we learn something new along the way.Thanks for your help Pajadt.
All the best
Roger

Hi Roger and Pajadt,

In fact, NOT yet at all. At the time of my previous post, indeed the video was playing fine in full screen and looping...
BUT - once I started placing the elemnts of the page, the video clip was playing on top of them...
So, I thought, I will place the video in it's own LAYER... That was NOT enough - I had to place all the page objects into their own layer.
BUT - now, even though I have set some breakpoints to make it responsive (all the objects are inside Layout grids) - it is no longer responsive.
I painted the layer just for now in RED, so that you can see what I mean : https://squadron-125.org.il/BGvideo.html
And the actual website for comparison : https://squadron-125.org.il/home.html (using the RZ video background player)

so, I am NOT done yet...

Any suggestions?

Thanks to you both
Alex

[pajadt]

Hi Alex that is problem with z-index video

add short code
insert HTML

Code: Select all

<style>
#wb_MediaPlayer1
{
   z-index: -1 !important;
}
</style>

between head tags
and problem be solved