I'm currently encountering an issue with my YouTube video display. I have managed to make it responsive, but it is stuck on the left side of the screen and I am unsure how to center it properly. I tried adjusting the padding, but it didn't work as expected.
Here is what I have tried:
import "../styles/SponsorUs.css";
import svg from "../assets/parcours.svg";
import React, { useState, useEffect } from "react";
import YouTube, { YouTubeProps } from 'react-youtube';
function Example() {
const onPlayerReady: YouTubeProps['onReady'] = (event) => {
event.target.pauseVideo();
}
const opts: YouTubeProps['opts'] = {
height: '350',
width: '640',
playerVars: {
autoplay: 1,
},
};
return <div className='video-container'><YouTube videoId="Zu8MYX5h4x8" opts={opts} onReady={onPlayerReady} /></div>;
}
export function SponsorUs() {
return (
<div className='global'>
<div className='titleSponsor'>
{ <img className='titleSponsorImg' src={svg} alt=''/>}
<h1>Le 4l Trophy, c’est quoi?</h1>
<p className='titleSponsorp1'>Le 4L Trophy est un raid étudiant organisé depuis plus de 20 ans au Maroc.
Il s'agit d'un défi sportif et humanitaire qui réunit chaque année des milliers d'étudiants
venus de toute la France et d'ailleurs. Le but ? Parcourir plus de 6000 kilomètres à bord de 4L,
tout en acheminant des fournitures scolaires pour les enfants défavorisés du Maroc.</p>
<h1>Notre itinéraire </h1>
<p className='titleSponsorp2'>Notre itinéraire pour le 4L Trophy est un véritable parcours du combattant!
Nous affronterons les routes les plus difficiles du Maroc, à travers les montagnes,
les déserts et les plaines arides. Nous serons confrontés à des défis physiques et mentaux,
mais nous sommes prêts à relever le défi!</p>
{ <img className='titleSponsorImg2' src={svg} alt=''/>}
<h1>Trailer du 4L Trophy</h1>
<Example />
<h1>Vous êtes captivés par notre projet ? </h1>
</div>
</div>
);
}
And here is the linked CSS:
.video-container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
Thank you for your assistance. I believe there is a minor adjustment required, but I'm not certain where to make it.