Video Full Screen - Question | JoomShaper

Video Full Screen

CH

Charley Hankins

SP Page Builder 1 year ago

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

0
10 Answers
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 1 year ago #78864

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.

0
CH
Charley Hankins
Accepted Answer
1 year ago #78867

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

0
CH
Charley Hankins
Accepted Answer
1 year ago #78868

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

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 1 year ago #78890

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.

0
CH
Charley Hankins
Accepted Answer
1 year ago #79030

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

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 1 year ago #79036

Have you used CUstom CSS from code example?

video {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0; }
0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 1 year ago #79037

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;
}
0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 1 year ago #79038

Check which one will work better for you.

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

foto_8671_2022.png

0
CH
Charley Hankins
Accepted Answer
1 year ago #79319

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

Thanks, Charley

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 1 year ago #79413

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.

0