Topic: ADDING a video as background on master page

Hi Serif family, I have a good question for you. hope someone has the answer.
How do I add an animated video clip as website background to my master page
so that is shows on all of my site pages. It is a very short clip and I want it to loop
so that my background will be animated.
But it has to be adjustable to to fit full page from below my navigation bar to bottom of page. Is there a way to do this?

2 (edited by Joe 2024-08-07 10:31:43)

Re: ADDING a video as background on master page

Have a look at the attached file which contains instructions. I've had to remove the video file as it was too big to upload to here.

Joe

Post's attachments

BackgroundVideoX8Demo2.wpp 25.46 kb, 7 downloads since 2024-08-07 

You don't have the permssions to download the attachments of this post.
I used to be indecisive, now I'm not so sure.

Re: ADDING a video as background on master page

"Change video source ( hologram.mp4) to your video id's"
Joe How do I do this? The video is an mp4 video.
Sorry but I am not as savvy in this kind of thing that you are. Kid gloves please.
The video size is 0.99MB
LENGTH:00:00:07
HIGHT: 480 WIDTH: 852
FILE NAME: Motion background 1097827033(1)
SITE MASTER PAGE IS: HIGHT 6000 WIDTH: 1024

Not sure if you need any more detail. Let me know if you do.
Thank you so much.

Re: ADDING a video as background on master page

Is the video a youtube video? What is the name of your video and does it end with .mp4 or something else?

If it's only .99Mb can you upload it with your next post? Use the attachments, browse button and add file buttons located above the submit reply button.

Joe

I used to be indecisive, now I'm not so sure.

Re: ADDING a video as background on master page

Joe wrote:

Is the video a youtube video? What is the name of your video and does it end with .mp4 or something else?

If it's only .99Mb can you upload it with your next post? Use the attachments, browse button and add file buttons located above the submit reply button.

Joe

Please note that there is no attachments option if you use the ‘Quick reply’ box. You need to use the Post reply link instead.

"Has it ever struck you that life is all memory, except for the one present moment that goes by you so quick you hardly catch it going?"
― Tennessee Williams

6 (edited by Danzil 2024-08-22 20:30:31)

Re: ADDING a video as background on master page

The Video is an MP4 file. the name is "motion background 1097827033"
size: 0.99MB
Length:00:00:07
I don't see and attach option. Only add image to post

Post's attachments

Motion Background 1097827033 (1).mp4 1018.42 kb, 8 downloads since 2024-08-22 

You don't have the permssions to download the attachments of this post.

7

Re: ADDING a video as background on master page

I don't see and attach option.

I think you will see one if you "edit" your answer.

Re: ADDING a video as background on master page

Danzil wrote:

The Video is an MP4 file. the name is "motion background 1097827033"
size: 0.99MB
Length:00:00:07
I don't see and attach option. Only add image to post

It's best to keep your file names simple, no spaces and all in lower case. As you can see in your last post, your have not spelled it correctly. A script will not function with errors.

To this end I renamed your file to motionvid.mp4 and loaded it into the attached file. I pasted the HTML code fragment to the master page, and the video code fragment to

<!--Master A Body Start-->

Download the file and preview it.

Post's attachments

BackgroundVideoX8Demo2.wpp 1.08 mb, 5 downloads since 2024-08-23 

You don't have the permssions to download the attachments of this post.
I used to be indecisive, now I'm not so sure.

Re: ADDING a video as background on master page

Copy the following and right Click the page > View > HTML Source.
<video playsinline autoplay muted loop id="bgvid">
           <source src="hologram.mp4" type="video/mp4">
        </video>

Hi Alfred, when I right click, view the HTML Source is not active, it is greyed out.

Re: ADDING a video as background on master page

"If it's only .99Mb can you upload it with your next post? Use the attachments, browse button and add file buttons located above the submit reply button."

This option only allows for images not video files.

11

Re: ADDING a video as background on master page

This option only allows for images not video files.

Danzil,

If you click Edit below your post you will see an option to attach a file.

12 (edited by Danzil 2024-10-16 21:40:47)

Re: ADDING a video as background on master page

GB as you can see from the attachments, there is no edit option below my post. only add image to post, submit and preview.


https://i.postimg.cc/v4GJMX7b/screen-shot-showing-no-edit-option.jpg

CORRECTION, I see it now, it is available after I post not during. So I am uploading the single title video file that I want to put in my master page to make it the animated background for my site. Please give me the steps.

Joe said: To this end I renamed your file to motionvid.mp4 (done) and loaded it into the attached file (???). I pasted the HTML code fragment to the master page, and the video code fragment to

<!--Master A Body Start--> (????) Sorry but this is not clear to me. apparently I am not as informed and need clearer detailed steps.

Post's attachments

motionvid.mp4.mp4 1018.42 kb, 1 downloads since 2024-10-16 

You don't have the permssions to download the attachments of this post.

13 (edited by Joe 2024-10-17 11:18:41)

Re: ADDING a video as background on master page

Danzil wrote:

GB as you can see from the attachments, there is no edit option below my post. only add image to post, submit and preview.


https://i.postimg.cc/v4GJMX7b/screen-shot-showing-no-edit-option.jpg

CORRECTION, I see it now, it is available after I post not during. So I am uploading the single title video file that I want to put in my master page to make it the animated background for my site. Please give me the steps.

Joe said: To this end I renamed your file to motionvid.mp4 (done) and loaded it into the attached file (???). I pasted the HTML code fragment to the master page, and the video code fragment to

<!--Master A Body Start--> (????) Sorry but this is not clear to me. apparently I am not as informed and need clearer detailed steps.

You have not downloaded my file from a previous post above. Things may be clearer once you preview it and read the notes.

Joe

I used to be indecisive, now I'm not so sure.

Re: ADDING a video as background on master page

Hi Joe: Yes I did download your file but as I followed your steps, the HTML Source was not active (see below) And I did not understand you "to scroll the video with the page comment. (see below) Thanks.

"Copy the following and right Click the page > View > HTML Source. "

(I right clicked and did view but the "HTML Source" is not active it is greyed out.)

"To scroll the video with the page,"

(not sure what this means, since I want the video to fill the page)

15 (edited by Joe 2024-10-19 11:55:42)

Re: ADDING a video as background on master page

Danzil wrote:

Hi Joe: Yes I did download your file but as I followed your steps, the HTML Source was not active (see below) And I did not understand you "to scroll the video with the page comment. (see below) Thanks.

"Copy the following and right Click the page > View > HTML Source. "

(I right clicked and did view but the "HTML Source" is not active it is greyed out.)

"To scroll the video with the page,"

(not sure what this means, since I want the video to fill the page)

HTML source - yes much of it is greyed out but you add code to to the white areas as in 'page body start' ( white background, green text). Do you see that or is that greyed out?

Scroll the video with the page is exactly as it says. The video is the backgound of the page and moves with the page as you scroll. Admittedly, if the page is much taller than the video it wont be a good look.

Joe

I used to be indecisive, now I'm not so sure.

Re: ADDING a video as background on master page

Thank you so much for your patience with me.
It seems that I am unable to understand your instructions. But if you are also saying that if the master page is long, (and mines is very long), putting the video clip on it won't work.

Then I should ask, do you know how I can put an animated video clip on a long master page that will fill it and look normal, and not distorted? Is there a software I can use?  Or do I have to find a video clip that is the same dimensions as my long master page.
If that can't be done, are you saying that the only thing I can do is use a solid color for the master page background?

What can I do to create a nice background for the site. Of must it just be solid color.

17

Re: ADDING a video as background on master page

Danzil wrote:

Thank you so much for your patience with me.
It seems that I am unable to understand your instructions. But if you are also saying that if the master page is long, (and mines is very long), putting the video clip on it won't work.

Then I should ask, do you know how I can put an animated video clip on a long master page that will fill it and look normal, and not distorted? Is there a software I can use?  Or do I have to find a video clip that is the same dimensions as my long master page.
If that can't be done, are you saying that the only thing I can do is use a solid color for the master page background?

What can I do to create a nice background for the site. Of must it just be solid color.

There seems to be a misunderstanding so I will clarify. You have two options with that background video:

1. The video plays in the background and the page scrolls over it
2. The video plays in the background and scrolls with the page.

Option 1. is prefered and that is how the demo file is configured. If you increase the page length in the demo and preview it, you will see how it works.
If option 2. is not suitable don't use it.

I used to be indecisive, now I'm not so sure.

Re: ADDING a video as background on master page

Thanks Joe:
I would like to try option 1, I just need instructions for “dummies” as they say.
I have the code provided, you said copy it and right click the page, go to view and then HTML SOURCE. But Html Source is greyed out so I can proceed to past the code there.
You said “HTML source - yes much of it is greyed out but you add code to the white areas as in 'page body start' (white background, green text). Do you see that or is that greyed out?”
Sorry, I don’t understand how do I add the code to the white area-page body? Now sure what this means.

19

Re: ADDING a video as background on master page

I asked : 'page body start' (white background, green text). Do you see that or is that greyed out?”

Please answer the questions when I ask them which may save a lot of to and fro. In the demo file source do you see what is in the image below? To do that in your file follow the instructions to copy and then to paste place your cursor at the right tip of the green arrow but in the white area and hit enter a couple of times. Click in the space you have just made, right click, paste.


https://i.postimg.cc/1nC0kf90/html.jpg

I used to be indecisive, now I'm not so sure.

Re: ADDING a video as background on master page

Joe wrote:

Please answer the questions when I ask them which may save a lot of to and fro. In the demo file source do you see what is in the image below? To do that in your file follow the instructions to copy and then to paste place your cursor at the right tip of the green arrow but in the white area and hit enter a couple of times. Click in the space you have just made, right click, paste.

If you only see white circles (instead of white round-ended rectangles with code in them) then you’ll need to click in the ‘Show Default Text’ button.

"Has it ever struck you that life is all memory, except for the one present moment that goes by you so quick you hardly catch it going?"
― Tennessee Williams

Re: ADDING a video as background on master page

Hi Joe and Alfred: Thank you for your patience.

You provided me with the code but I could not follow the instructions because HTML Source is not active it’s greyed out.
I said:
“I have the code provided, you said copy it and right-click the page, go to view and then HTML SOURCE. But Html Source is greyed out so I can proceed to past the code there.

You said “HTML source - yes much of it is greyed out but you add code to the white areas as in 'page body start' (white background, green text). Do you see that or is that greyed out?”

Sorry, I don’t understand, how do I add the code to the white area-page body? Now sure what this means.
Are you saying instead of dong “view, HTML Source”, that I should copy the code and then go to "insert", "HTML Fragment" and then click in the white area of the master page for the HTML Source dialog box to open? I can to that, but there are two sections there, Header  and body. In which do I past the code. in which do I paste it?

You also said:
“To this end I renamed your file to motionvid.mp4 and loaded it into the attached file. I pasted the HTML code fragment to the master page, and the video code fragment to <!--Master A Body Start-->”
I don’t understand what this means, I know how to paste html code in master page, but I don’t understand- “and the video code fragment to  <!--Master A Body Start-->” Are you saying that the Motionvid.mp4 should be placed in the body section of the HTML Source dialogue?

You said:
“In the demo file source do you see what is in the image below? To do that in your file follow the instructions to copy and then to paste place your cursor at the right tip of the green arrow but in the white area and hit enter a couple of times. Click in the space you have just made, right click, paste.”

If you are referring to the HTML Source dialogue box, there are 4 right arrow, see attachment
Which do I paste to?
When you are as smart as you guys on this, it is easy to assume someone like me understands your communication but I confess I am not there yet. Please forgive me.




https://i.postimg.cc/SJd1ytmb/DM-HTML-SOURCE-DIALOGUE.jpg

Re: ADDING a video as background on master page

This has been painful to follow so, following Joe's instructions, I made a 1:38 minute tutorial https://youtu.be/VgxKFrgcK2Y that follows all of the steps in his procedure. Hope it helps.

Re: ADDING a video as background on master page

Thanks so much TomH, and Alfred and Joe. I will follow the video.

24

Re: ADDING a video as background on master page

tomH wrote:

This has been painful to follow so, following Joe's instructions, I made a 1:38 minute tutorial https://youtu.be/VgxKFrgcK2Y that follows all of the steps in his procedure. Hope it helps.

Well done Tom.

Joe

I used to be indecisive, now I'm not so sure.

Re: ADDING a video as background on master page

The video is amazing. I just have one issue. The HTML Source is still inactive when I use "View" drop down. I don't know why or how to access HTML Source to proceed.
https://i.postimg.cc/jLSHCk9g/HTML-SORUCE-ISSUE.jpg