An independent forum site for members of the Serif software community
You are not logged in. Please login or register.
Automated signup has been disabled for these forums. If you wish to register, please send an email to admin[at]punster[dot]me stating your preferred username.
Embedded images: Click on the 
Add image to post link below the message box. Your photo will be uploaded to the postimage website and then shared here via a thumbnail link. Click on the thumbnail for a larger view.
Private messages: There is no pop-up alert for new PMs on these forums, so you need to look out for the PM link (near the top right-hand corner of any forum page) becoming bold.
Alfred's Serif Users' Forums → WebPlus → 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?
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
"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.
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
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.
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
I don't see and attach option.
I think you will see one if you "edit" your answer.
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.
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.
"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.
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.
GB as you can see from the attachments, there is no edit option below my post. only add image to post, submit and preview.
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.
GB as you can see from the attachments, there is no edit option below my post. only add image to post, submit and preview.
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
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)
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
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.
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.
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.
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.
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.
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.
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.
Thanks so much TomH, and Alfred and Joe. I will follow the video.
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
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.
Alfred's Serif Users' Forums → WebPlus → ADDING a video as background on master page
Powered by PunBB, supported by Informer Technologies, Inc.