I attempted to position a MUI button in the top right corner, but for some reason, I couldn't move the button without using margin left and right. However, this is not an ideal solution for my project.
import './NavigationPage.css'
import * as React from 'react';
import videoBg from '../assets/videos/japan_bg2kTrim.mp4'
import IconButton from '@mui/material/IconButton';
function NavigationPage() {
const [muted, setMuted] = React.useState(true);
const handleToggleMute = () => setMuted(current => !current);
return (
<div>
<IconButton variant='contained' onClick={handleToggleMute}
sx={{ display: 'flex', justifyContent: 'flex-end'}}>Unmute</IconButton>
<video src={videoBg} autoPlay loop muted={muted}/>
</div>
);
}
export default NavigationPage;
My CSS:
* {
margin: 0;
padding: 0;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}
video {
width: 100%;
height: 100%;
top: 0;
left: 0;
object-fit: cover;
position: fixed;
z-index: -1;
}
Does anyone have suggestions for placing the button in the corner without relying on margins?