[FIXED] Why is my Youtube video not showing on iFrame with Next.js and UIkit?

Issue

I have place an iFrame tag in my Next.js component. On my website I can see the frame but it says "Youtube does not authorize this connection". What is wrong ?

Here is my code:

            <iframe 
                src="https://www.youtube.com/watch?v=E8gmARGvPlI" 
                width="1920" 
                height="1080" 
                frameBorder="0" 
                allowFullScreen 
                uk-responsive 
                uk-video="automute: true">
            </iframe>

Solution

If you want to play youtube videos in an iframe you need to do it using their APIs. You can learn more about how to do that here - https://developers.google.com/youtube/iframe_api_reference

If you simply want to embed the video with no external control over the video you can simply embed it. More about embedding here - https://support.google.com/youtube/answer/171780?hl=en

Answered By - NavalRishi

Answer Checked By - Candace Johnson (PHPFixing Volunteer)