Estoy construyendo un sitio con Next.js y tailwind.
Estoy luchando para que el componente de video se muestre correctamente en un tamaño de pantalla móvil.
He intentado varias formas de solucionar el problema, pero los lados del video aún se cortan en un tamaño de pantalla más pequeño.
Alguien sabe como solucionar este problema por favor?
El sitio implementado se puede ver en: www.catrinmentzoni.com
Y el repositorio de Github en: https://github.com/Babyoilrig/Catrin--Mentzoni-Portfolio
Muchas gracias
Estabas en el camino correcto con el truco de incrustación receptivo de YouTube, aquí está la solución arreglada a través de codesandbox: https://codesandbox.io/s/admiring-parm-mmj5xw?file=/components/VideoSection/index.js:1114- 1251
Puede ver la solución aquí: 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} Aquí el className={css.videoResponsive} no se estaba aplicando, puede eliminar las clases de viento de cola class=grid gap-0 etc. ya que el código de posicionamiento receptivo del video de YouTube se encarga de llenar la página.
En general, la class funciona a partir de React 16, pero arroja una advertencia que también puede ver en su consola, elegiría className constantemente mientras escribo JSX
También eliminé el ancho/alto del iframe.
Parece que la solicitud adicional es que el escritorio tenga un 50 % y esté centrado y que el dispositivo móvil tenga el ancho completo.
Use lo siguiente como dirección y no como una solución.
@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%; } } Puede usar consultas de medios para cambiar el comportamiento; sin embargo, al tratar de responder, el padding-top agrega espacio adicional, que debe tratar de jugar y arreglar.
El codesandbox anterior se actualiza para mostrar el resultado https://codesandbox.io/s/admiring-parm-mmj5xw?file=/components/VideoSection/VideoSection.module.css:680-1556