video as page background

To use a video as a page background, open a code object, make sure the code placement is set to "in Body", and enter:

<video autoplay muted loop id="myVideo">
  <source src="video.mp4" type="video/mp4">
</video>

Replace "video.mp4" in the code with the name of your video. Because you are specifying the video file name in a code object, SS will not automatically upload it to your site when you publish your project. You will need to use a FTP program (e.g., FileZilla) to upload it to your site. If your site host account offers a file manager, you could possibly use that to upload the file.

Next, open another code object, set the code placement to "in CSS", and enter:

#myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  object-fit: fill;
}

This CSS code will enable the video file to cover the page background.

You can add text to your page using the SS Text object or Title object; no Javascript is needed. If you use a Title object, be sure to use the Geometry Editor's Option tab to turn off the "Render Background" option.

Because the video is not visible until you publish, you may find it difficult to know where to place your text so it overlays the video is the correct location. To help with this, take a snapshot of the video while playing it in your video player. Your player may have an option to do this (the free VLC media player can do this). After obtaining your still photo, resize it to fit your project's web page and add it to your project as a page background. Now you can see what your text will look like when the page is published with the video.

 

fantastic. thanks.

works good with chrome, but shows left and right borders with explorer, which I cannot seem to eliminate. I tried resizing the hosting page, but didn't make a difference.

see example at; www.otkrit1.com/testbed2.html

Additional points - you can add a path to the SRC file (eg; "video.mp4" or "/path1/video.mp4".

Also, since the video acts as an object, it is governed by layering. That is additional objects (text, images) have to be in upper layers or they will be obscured by the video.

"left and right borders" - Try changing the video code to:

#myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

IE cannot handle modern CSS and chokes on some modern HTML5 code. How did it look in Edge? This change should also get the video to show properly in all mobile devices.

Yes, since the video code is added to the page as a normal SS object and is not a "real" page background, you need to ensure that it is placed "To Back" so it does not obscure other objects on the page.

You should not have an issue playing the video on mobile devices. I would be interested to know what mobile device fails to play the video. However, because the video file is so large, it could take a few seconds to download into a mobile device.

Two ways to fix this. One is to add a background image to the page. This would be visible until the video loads and becomes visible. Just make sure the background image is sized to fit your page and does not repeat. The 2nd method is to add a video poster. This is an image used as a placeholder until the video is loaded. This image is added via the video code:

<video autoplay muted loop poster="path-to-image" id="myVideo">
  <source src="video.mp4" type="video/mp4">
</video>

where "path-to-image" is the path and file name of the image to be used as a poster.

 

thanks larryd

w.r.t the test page at http://www.otkrit1.com/testbed2.html; If you click on the direct link to the video file in the upper left corner within safari on an iphone (Version 12.1.2) the video will open, but fail to play. Same as the web page (video background does not appear). Even after I amended the code as directed.

 

Re: amended the code; Explorer still shows side bars. Edge is the same. Chrome displays correctly (video seems to expand to fit the available screen).

Obviously you can see from yourself by viewing http://www.otkrit1.com/testbed2.html

When viewing the test page in my iPhone 6S, the video does not play, but does in my iPad. Both are running iOS 11. The biggest difference between my 2 devices is my iPhone only has 16MB memory (with 2.5MB free) while my iPad has 512MB (with about 500MB free).

I grabbed your HTML source code, modified it to play a smaller sized video (810KB) and it played full-screen in my iPhone. I suspect the problem is that your video at 87.3MB is too big and exceeds the resources of your phone as it did on mine.

As for the IE and Edge problem, there are 2 problems.

1. The CSS "object-fit" attribute does not work in IE and in Edge it only works for images.

2. You have your page centered. When SS centers a page, it creates a <div> block which is used as a container for all the objects on your page, and then applies CSS to keep this div centered in the browser window. Because IE/Edge do not support the object-fit attribute, the CSS used to size the video to fit the page actually is fitting the video to fit the centered <div> block while maintaining the video's aspect ratio. This leaves the page background visible. If the white background is unsuitable, you can change its color.

While you can add CSS to IE/Edge that will give you a full-screen background for some screen sizes, it will fail when the browser is resized due to their lack of support for the object-fit attribute.

1. I replicated your code as faithfully as I could, here;

http://www.otkrit1.com/video_as_background3.html

The video remained original size (neither fitted, nor scaled to the browser window in Chrome 71.0.3578.98 (Official Build) (64-bit) and didn't load the video in Explorer 11.

2. I understand you can add a image as a page background using the background feature (PAGE>Background>background>Image), but seems no way to use a video via that route.....

Thanks and sorry for sucking up your time.

"However limitation is unchanged as before)"

I'm really not sure what you are trying to achieve. The current CSS code maintains the video's aspect ratio and fills the browser window at the expense of not showing the entire video in the browser window. If you want to fill the browser window with the entire video, you cannot maintain the aspect ratio, and IE this will show the page background since the IE rendering engine is severely out-dated and does not handle modern CSS.

Refer to this link for popular browser sizes; do not assume everyone has the browser opened full-screen.

https://www.w3schools.com/brow...browsers_display.asp

Add Reply

Likes (0)
×
×
×
×