Youtube video optimize on page in reactjs
ReactJS component VideoContentYT (npm package) can optimize youtube video content on page
example: <VideoContentYT src="LXb3EKWsInQ" params={{autoPlay: true}} />
props:
src
- source of content. Can be: youtube vide hash\code (example: LXb3EKWsInQ
) or url on youtube video [NOT WORKING IN IE] (example: https://www.youtube.com/watch?v=LXb3EKWsInQ
or https://youtu.be/LXb3EKWsInQ
or https://www.youtube.com/embed/LXb3EKWsInQ
)
params
- object with parameters.
Parameters detail (params
):
autoPlay
- boolean - set true
for autoplay video after press play button
thumbnailQuality
- string - youtube video preview quality. Can be: default
, hq
, mq
, sd
, maxres
title
- string - img title
className
- string - custom class name
Demo website
Press Optimized
for loading optimized version, press No optimized
for loading not optimized version.
For start demo project, clone this repository and start (do yarn install
and yarn start
or npm install
and npm start
(if you use npm))