video full screen - Forum | JoomShaper
Staff replied SP Page Builder

video full screen

Asked by Charley Hankins 4 years ago Last activity 4 years ago

Hi. Is there a way to embed a video to display at full screen?

10 replies

Paul Frankowski Senior Staff
4 years ago · edited

Hi Charley,

in general yes, where you saw it ? Share me URL, so I will be able to show you what HTML/CSS code you have to use to get this same effect.

BTW

On youtube you can find many guides, but easier to use text guide (2021): https://alvarotrigo.com/blog/how-to-create-a-fullscreen-video-with-css-and-html/

HTML code you can use inside Raw HTML addon and CSS probably you know already where.

Charley Hankins Asked this

Hi. Thanks for the response.
I'm looking at this site:
https://www.georgetown.edu/
Thanks for the guide. I'll have a look at it.

CH

Charley Hankins Asked this

The guide was very helpful. Thank you. I'm still having some trouble with it covering the entire page. It doesn't seem to want to cover the left hand margin. https://www.southark.edu/test

Paul Frankowski Senior Staff
4 years ago · edited

In Row Options > Fluid Row: Yes and remove gaps: Yes

foto_8664_2022.jpg

Then in Column options (inside that Row) remove all padding values, set 0

foto_8665_2022.jpg

It should help.

Charley Hankins Asked this

Thanks! That was very helpful. One last question: Is there a method to make this responsive?

Paul Frankowski Senior Staff
4 years ago · edited

Have you used CUstom CSS from code example?

video {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0; }
Paul Frankowski Senior Staff

Or you can use custom CSS from GeorgeTown (.edu)

.video-container { width: 100%; }

.video-container video {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
Paul Frankowski Senior Staff

Check which one will work better for you.

And above custom CSS you can add inside that Page > Custom CSS

foto_8671_2022.png

Charley Hankins Asked this

Those solutions don't seem to work. It is still not responsive.

Thanks,
Charley

Paul Frankowski Senior Staff
4 years ago · edited

so you have to search deeper inside Internet tips

OR

Use different video for Tablet, Mobile - smaller. Each Addon can be disabled/enabled for those.

Log in to reply.