Is it possible to center a full screen video on each different device?
depending on how you’re implementing the video, you should be able to add flex options to the container it’s in so that it will center. That would be the typical way, but without knowing how you are adding it to the page it’s hard to know exactly what to tell you.
My first attempt.
www.serviceland.nl
Yes, easily, but not by using position:fixed; to place your video. Fixed means fixed. Left 0, top 0. (Also, you should not use inline styles to style your buttons. You should use CSS classes or bootstrap utility classes when appropriate.)
You need to write the code properly, or use the proper video embed component. You also have to decide on whether you’re going to scale the video with the browser width, or have it crop after a certain size.
Also, I don’t think I’d use a 4k, 80mb video as a background video (unless you want to score zero on Google page speed insights.) I was easily able to convert this to a 5mb mp4 at 1920px x 1080px.
This is just a quick example of your layout done in a more “best practices” manner. This is by no means a complete (or even correctly done) page, but it should give you a better idea of how to proceed.
Thanks for diving in, I really appreciate that.
Bootstrap is new to me. So any help will be appreciated.
The 4K footage was just for testing my mobile band-with over here.
The original footage was a run and gun testcase for new camera firmware.
The original footage was in 8K, so I kept pace. 
Maybe my question was not clear. I ment center the video on all devices but keeping full height!
I will study your solution. Thnx.
Centering the video is easily done automatically if you use Bootstrap’s flexbox grid and the BSS HTML video component, or the responsive embed component.
But keeping the video full height means some sort of compromise because…
- You have no idea what the screen height of the device the person viewing your site will be using. Statistically, these are the most popular sizes these days…
- 1920Ă—1080 (19.53%)
- 1366Ă—768 (15.01%)
- 1440Ă—900 (9.65%)
- 1536Ă—864 (7.26%)
- 2560Ă—1440 (5.73%)
- 1680Ă—1050 (4.43%)
- 1280Ă—720 (3.34%)|
- 1280Ă—800 3.09%)
- 360Ă—640 (2.45%)
- 1600Ă—900 (2.25%)
-
Mobile and tablets throw a whole other wrench into the machine, because you have to take into account hundreds of devices, with both portrait and landscape formats that SCROLL. So is your video going to remain static on mobile, or scroll along with the page?
-
There is really no way to cover all your bases with stuff like this other than to use things like the CSS vh (viewport height) rule. If you always want your video to take up 100% of the viewport width but stay centered, you have to decide how you will compromise the view of the video. Are you going to keep the video at a fixed height and crop the edges, or scale it proportionately with the width of the viewport, in which case it will naturally reduce the height, or do you want to distort the horizontal width of the video (ugly) so 100% of it the video is always visible?
We have a saying over here:
An idiot can ask more questions than ten wise men can answer.
My idea was simple. In Bootstrap Studio there ara six devices (viewports).
So I thought to make a media query for each device and center the video (2K DCI 2048x1080) in the background at full height. No distortion, just by cropping the left and right side.
What do you mean by BSS HTML?
It does not sound to me as if you have any experience creating websites or very little. BSS stands for Bootstrap Studio, the app you’re using and HTML is the language websites use. What you’re trying to do is very doable within the app, but … the way you’re doing it is extremely old school by almost 20 years. It would be very beneficial for you to get some knowledge under your belt on HTML/HTML5 and CSS/CSS3 so you can understand how things are done in websites today.
Just in case you were expecting a drag and drop app that does it all for you without any knowledge, this isn’t it. You do need some HTML and CSS knowledge in order to really use the potential of this app and to be able to style your site correctly.
No offense meant if you have knowledge of these things, just that your posts don’t sound like you do. There are a lot of good free and cheap tutorials and online classes out there. Udemy.com is one that comes to mind, but there are a lot more that I am not thinking of this morning. Hope this helps and as mentioned, no offense meant at all, just trying to make sure that you understand how things work better. 
Welcome to the forum @Kotik
Unless I’m mistaken I assume you’re after something similar to this example as found in this article. You can likewise find other discussions on the topic. Many other things can be done with JS in addition to what can be done with CSS only. You don’t need media queries to accomplish the centering. Though you will probably want to use them or another approach to feed different video sources for the various different breakpoints regarding optimization of delivery.
1 Like
Many thanks for the tip.
I will look into it. 
BSS = Bootstrap Studio (shorthand we use to describe the program in the forums.)
HTML = Hypertext markup language (the code that makes your page look the way it looks.)
Bootstrap Studio “writes” your website’s HTML by using drag-and-drop components that are standard to the Bootstrap framework and HTML5.
One of those components is the HTML5 Video component, which can be found by going to the Studio panel (upper right) and looking under the last section Misc > Video. Dragging this into a container > row > column will then allow you to specify a video source (and other options like autoplay, mute, repeat, and hiding the controls.) Voila. You can now display your video as a background on your website in BSS.
Here is a functional example of what you are trying to create…
https://thelightwavegroup.com/vid2/
Here’s how you do it…
Drag a Div on to the body. Drag the Misc > Video component into the Div and enter the absolute path to your video through the Options panel (you will need to upload the video to your server to be able see it in BSS.) Then add the following CSS to your styles.css stylesheet…
video {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
transform: translateX(calc((100% - 100vw) / 2));
overflow-x: hidden;
}
This will give you the full height, centered video with cropped sides effect you want.
The logo and buttons are just another Div in the Body after the Video Div. That Div will have the class .logo-cont assigned to it, and this is the CSS for the class:
.logo-cont {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
You will use Options > Flexbox on this Div to position the logo and buttons. Make sure your workspace is set to mobile size. Set Flex Container to Flex, Direction to Column, Justify Content to Center and Align Items to Center.
Now, Inside that Div, add a Container with a Row > Column > Image for the logo (use text align center on the column to center the logo) and place your .png image there.
Then add a second row under the first one with Align Column X set to Center, and then add a column in the row. Add a button. Set the button to Block. Duplicate the column 3 times. Then use the Column width options and padding utility classes to to determine how the columns layout, and how the buttons display at different screen sizes.
In my example, I have the columns all set to Auto at MD size, and use the following Bootstrap utility classes on each column: pl-3 pr-3 pl-md-1 pr-md-1 pt-1 pb-1
One free lesson, no charge. Next time, you’ll have to hire me. This is how I make my living.
About 12 years ago I wrote the first Dutch video bot using Flash. A lot of work with more than 300 video’s in portrait format.
You know what happened to Flash, especially on the Mac.
About 6 years ago Adobe released a new version of Dreamweaver introducing Bootstrap. I completely ignored that (my mistake) as I thought it was a framework invented by Adobe.
And you understand that I had no confidence in Adobe at all.
During that period my work shifted to making video’s so no more websites for me.
I am now retired and I thought it would be fun to create a website for myself. In the meantime I understand that Bootstrap has developed into an industry and I have a lot to learn, again.
Thanks for all the help.
1 Like
The good thing is that everything you might need help on someone else has 99.9% of the time already asked the same thing somewhere on the web. Especially concerning Bootstrap since it’s the most widely used responsive framework on the web. In general with HTML, CSS and even JS in most cases the same % literally holds true also that similar has been asked more than once somewhere before.
For example when I mentioned this above:
You’ll notice the CSS that was provide above by PrintNinja is found in the first returned result of that search query I posted above.
Found here:
So if you learn to search proficiently, are a diligent researcher and most of all have a willingness to learn. Then you can most certainly find solutions to what you’re after from those who have encountered the same issues and asked similar or the same questions long before you.
Stay encouraged you’ll get there, just have fun while learning. 
1 Like
One of the privileges of being retired is that you only do things that you enjoy! 
Hey, you’re ruining the wizardly mystique 
by explaining how we come up with these “magical” solutions!
But yeah @Kotik, @bss_user is 100% correct. My example simply used the code from that Stack Overflow answer to do the video centering and cropping (which you could have found yourself.) Half the battle is knowing what you need to find, the other half is knowing where to look, and the third half (huh? 
) is knowing how to implement it. Often, it is just a matter of trial and error, though not every solution will integrate so seamlessly. Sometimes, you’ll find solutions online that get you in “the ballpark” and then you’ll have to tweak and adjust them you work for your own particular situation.
Everything website-related that Adobe touches turns to adobe (Spanish for mudbrick)
Only in Adobe’s case, the mud is made out of s*#t, and the bricks never harden.