CODEWITHSUNDEEP
htmlcssiframeyoutube
jdavid
jdavid

Reputation: 253

My YouTube video wont show in iframe

Here is the code I entered in my HTML

<iframe width="640" height="360" src="https://www.youtube.com/watch?v=ZwKhufmMxko">
</iframe>

The video frame will show, but the actual video won't load or even show up. I have tried waiting, so it shouldn't be a loading issue.

I also am currently only using HTML and CSS

Any ideas on how I can get this to work?

Upvotes: 24

Views: 99497

Answers (5)

Harsha Gihan Liyanage
Harsha Gihan Liyanage

Reputation: 31

import YouTubeIframe from "react-native-youtube-iframe";

        <YouTubeIframe
          height={200}
          width={"100%"}
          videoId="Kua83b6EbQ4"
          params={{ autoplay: 1 }}
        />

Upvotes: 0

Jerrell-Abrahams
Jerrell-Abrahams

Reputation: 49

Make sure your URL has the embed included. A normal youtube Link causes that problem.

Upvotes: -1

user3467534
user3467534

Reputation: 341

Change watch?v= to embed/

The easiest way to get the correct link is to right-click on the YouTube video and select copy embed code.

<iframe width="854" height="480" src="https://www.youtube.com/embed/ZwKhufmMxko" frameborder="0" allowfullscreen></iframe>

Upvotes: 24

Vahe Nikoghosyan
Vahe Nikoghosyan

Reputation: 469

I am late to respond but here what I used to convert the youTube url to Embed and make the video work.

function getVideoId(url) {
    const regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/;
    const match = url?.match(regExp);

    return (match && match[2].length === 11)
      ? match[2]
      : null;
}
    
const videoId = getVideoId('https://www.youtube.com/watch?v=fB4Ca1iTii8');
const iframeMarkup = '<iframe src="https://www.youtube.com/embed/' 
    + videoId + '" frameborder="0" allowfullscreen></iframe>';

console.log('Video ID:', videoId) // fB4Ca1iTii8
console.log("https://www.youtube.com/embed/" + videoId)

Upvotes: 1

apokryfos
apokryfos

Reputation: 40653

YouTube doesn't allow 3rd parties to embed their site directly like that. Using 

<iframe width="640" height="360" src="https://www.youtube.com/watch?v=ZwKhufmMxko">
</iframe>

will raise an error Refused to display 'https://www.youtube.com/watch?v=ZwKhufmMxko' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'. to indicate this (you should really check the console for these things).

Fortunately Youtube offers the "embed video" option, which you need to use in order to embed videos.

Your linked video for example would produce the iframe code:

<iframe width="560" height="315" src="https://www.youtube.com/embed/ZwKhufmMxko" frameborder="0" allowfullscreen></iframe>

Upvotes: 44

Related Questions