So I’m trying to add a video to my website and found out that Vidstack can be a proper library in terms of using players and so forth, but the issue is that when I add a Youtube video as its source, I am not able to change the quality of that video.
To be precise, its library is a bit vague is this term so I’m stuck.
Any help would be appreciated.
This the component and the necessary imports
// video player css
import "@vidstack/react/player/styles/default/theme.css";
import "@vidstack/react/player/styles/default/layouts/video.css";
// media player components
import { MediaPlayer, MediaProvider, Poster, Track } from "@vidstack/react";
import {
defaultLayoutIcons,
DefaultVideoLayout,
} from "@vidstack/react/player/layouts/default";
// images
import blank from "@/images/rightAdvice.png";
const ThrivingBusiness = () => {
return (
<div className="ThrivingBusiness flex w-screen flex-col items-center justify-center py-20">
<div className="w-full max-w-[1024px] px-5 text-center">
<p className="text-clamp-para">BUSINESS CONSULTING</p>
<h1 className="text-clamp-title">
A business that thrives on the knowledge and insight of the leaders
</h1>
<MediaPlayer
className="my-10"
posterLoad="visible"
load="play"
title="business consulting"
src="https://www.youtube.com/watch?v=xIIJfmDnvPE"
playsInline
aspectRatio="16/9"
storage="storage-key"
viewType="video"
poster={blank}
logLevel="warn"
crossOrigin
>
<MediaProvider>
<Poster className="vds-poster" />
</MediaProvider>
<DefaultVideoLayout thumbnails={blank} icons={defaultLayoutIcons} />
</MediaPlayer>
<div className="text">
<p className="line-clamp-4 text-clamp-para">
Sed lorem ut nulla tortor sit eget felis. Integer malesuada
curabitur vel interdum leo justo at ultricies. Sit aliquet tempus
elementum ac nibh lorem nulla morbi nullam. Tincidunt massa amet
sagittis aliquam turpis volutpat. Vitae aliquam malesuada varius
felis. Risus aliquam aliquam consequat habitant. Id elit turpis amet
vel at sapien. Massa tempus augue lobortis enim quam consectetur
dictum. Elementum id tortor venenatis lectus sed. Adipiscing nisi
felis aliquam nunc. Quis et sed ac urna augue feugiat mi eget.{" "}
</p>
<p className="line-clamp-3 text-clamp-para">
Sed lorem ut nulla tortor sit eget felis. Integer malesuada
curabitur vel interdum leo justo at ultricies. Sit aliquet tempus
elementum ac nibh lorem nulla morbi nullam. Tincidunt massa amet
sagittis aliquam turpis volutpat. Vitae aliquam malesuada varius
felis. Risus aliquam aliquam consequat habitant. Id elit turpis amet
vel at sapien. Massa tempus augue lobortis enim quam consectetur
dictum. Elementum id tortor venenatis lectus sed. Adipiscing nisi
felis aliquam nunc. Quis et sed ac urna augue feugiat mi eget.{" "}
</p>
</div>
</div>
</div>
);
};
export default ThrivingBusiness;