I am building a site with Next.js and tailwind.
I am struggling to get the video component to display correctly on a mobile screen size.
I have tried multiple ways to fix the issue – but the sides of the video are still being cut off on a smaller screen size.
Does anyone know how to solve this issue please?
The deployed site can be viewed at: www.catrinmentzoni.com
And the Github repo at: https://github.com/Babyoilrig/Catrin--Mentzoni-Portfolio
Thanks very much
You were on the right track with the responsive youtube embed hack, here is the fixed solution via codesandbox - https://codesandbox.io/s/admiring-parm-mmj5xw?file=/components/VideoSection/index.js:1114-1251
You can see the solve here - https://mmj5xw.sse.codesandbox.io/
<div
class="grid gap-0 grid-cols-1
grid-rows-1 place-items-center
content-center pl-5 pr-5" // <<< This is not needed.
className={css.videoResponsive}
In here the className={css.videoResponsive} was not applying, you can remove the tailwind classes class=grid gap-0 etc. as the youtube video responsive positioning code takes care of filling the page.
In general class works as of React 16 but it throws a warning which you can see in your console as well, I would pick className consistently while writing JSX
I also removed the width/height from the iframe.
It looks like the additional ask is for Desktop to be 50% and centered and mobile to be full width.
Use the below as direction and not a fix.
@media screen and (min-width: 769px) {
.videoResponsive {
overflow: hidden;
position: relative;
width: 100%;
}
.videoResponsive::after {
padding-top: 56.25%;
display: block;
content: "";
border: 1px solid red;
}
.videoResponsive iframe,
.videoResponsive object,
.videoResponsive embed {
border: 0;
position: absolute;
width: 50%;
height: 915px;
left: 0;
right: 0;
margin: 0 auto;
}
}
@media screen and (max-width: 768px) {
.videoResponsive {
overflow: hidden;
position: relative;
width: 100%;
}
.videoResponsive::after {
padding-top: 56.25%;
display: block;
content: "";
}
.videoResponsive iframe,
.videoResponsive object,
.videoResponsive embed {
border: 1px solid red;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
You can use media queries to change behavior, however in trying to be responsive, the padding-top adds additional space, which you should try to play around and fix.
The codesandbox above is updated to show the result https://codesandbox.io/s/admiring-parm-mmj5xw?file=/components/VideoSection/VideoSection.module.css:680-1556