[Feat] Optimise Video

[ManishBisht777]

Description

Currently, the performance of the page due to the video player this can optimize by certain techniques which can be seen in below article

https://www.labnol.org/internet/light-youtube-embeds/27941/

Screenshots

No response

Additional information

No response

[Jayakumar03]

I would love to work on this .

[ManishBisht777]

Sure assigned to you

how ever you have to look into it, if the thing works with nextjs or not

[Vishal-raj-1]

Hey @Jayakumar03 any update on this issue?

[Shyam3050]

I will work on this issue

[ManishBisht777]

sure @Shyam3050 assigned to you :)

[ManishBisht777]

The issue is being unassigned due to inactivity and assigned to @Shyam3050

[Shyam3050]

Where should I globally place the JS code for optimization?

[ManishBisht777]

you can put it in /lib folder or any other place which you feel like suitable for this

[Shyam3050]

Hey, @Vishal-raj-1 and @ManishBisht777 Found a better solution using react-lite-youtube-embed. Can I proceed with it?

[Vishal-raj-1]

@Shyam3050 It's not stable, if you are planning to use any package then go for react-youtube

[Shyam3050]

I need help to add these two function

function labnolIframe(div) {
var iframe = document.createElement('iframe');
iframe.setAttribute('src', 'https://www.youtube.com/embed/' + div.dataset.id + '?autoplay=1');
iframe.setAttribute('frameborder', '0');
iframe.setAttribute('allowfullscreen', '1');
iframe.setAttribute('allow', 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture');
div.parentNode.replaceChild(iframe, div);
}

function initYouTubeVideos() {
var playerElements = document.querySelectorAll('.youtube-player');
for (var n = 0; n < playerElements.length; n++) {
var videoId = playerElements[n].dataset.id;
var div = document.createElement('div');
div.setAttribute('data-id', videoId);
var thumbNode = document.createElement('img');
thumbNode.src = '//i.ytimg.com/vi/ID/hqdefault.jpg'.replace('ID', videoId);
div.appendChild(thumbNode);
var playButton = document.createElement('div');
playButton.setAttribute('class', 'play');
div.appendChild(playButton);
div.onclick = function () {
labnolIframe(this);
};
playerElements[n].appendChild(div);
}
}

A Better Method for Embedding YouTube Videos on your Website.
Where should I put these files?
when I put any place it causes an error document not found.
in the ssr document was undefined which caused an error.
I tried this on my existing React project it works.
In next.js I am unable to understand what should I do any suggestions,s please?
I will try my best it is the most challenging and interesting issue.

[Vishal-raj-1]

I need help to add these two function

function labnolIframe(div) { var iframe = document.createElement('iframe'); iframe.setAttribute('src', 'https://www.youtube.com/embed/' + div.dataset.id + '?autoplay=1'); iframe.setAttribute('frameborder', '0'); iframe.setAttribute('allowfullscreen', '1'); iframe.setAttribute('allow', 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture'); div.parentNode.replaceChild(iframe, div); }

function initYouTubeVideos() { var playerElements = document.querySelectorAll('.youtube-player'); for (var n = 0; n < playerElements.length; n++) { var videoId = playerElements[n].dataset.id; var div = document.createElement('div'); div.setAttribute('data-id', videoId); var thumbNode = document.createElement('img'); thumbNode.src = '//i.ytimg.com/vi/ID/hqdefault.jpg'.replace('ID', videoId); div.appendChild(thumbNode); var playButton = document.createElement('div'); playButton.setAttribute('class', 'play'); div.appendChild(playButton); div.onclick = function () { labnolIframe(this); }; playerElements[n].appendChild(div); } }

A Better Method for Embedding YouTube Videos on your Website. Where should I put these files? when I put any place it causes an error document not found. in the ssr document was undefined which caused an error. I tried this on my existing React project it works. In next.js I am unable to understand what should I do any suggestions,s please? I will try my best it is the most challenging and interesting issue.

@ManishBisht777 See this

[ManishBisht777]

You can create a new client component instead of a function and use it in MDX
Since the component is client comp you can access document and window methods in it

The component takes the URL and any other field that u feel like
and you can handle things in the useEffect

[ManishBisht777]

Hope that helps

[Shyam3050]

@ManishBisht777 I have some issues can we do a Zoom call?
I solved almost 5 issues but this one is the most challenging for me.
I tried with react project it works but in Next.js I was unable to solve it.

[ManishBisht777]

Quite bust lately, you can connect with other folks on discord or whatsapp grp of frontend freaks