CODEWITHSUNDEEP
reactjstypescriptyoutube
stickfigure
stickfigure

Reputation: 13556

How to embed a YouTube iframe using React + Typescript?

Typescript seems to be working against me here. Here's what I want to embed:

<iframe 
    width="560" 
    height="315" 
    src="https://www.youtube.com/embed/BLAH?showinfo=0" 
    frameBorder="0" 
    allow="autoplay; encrypted-media" 
    allowFullScreen></iframe>

The problem is the allow attribute:

TS2339: Property 'allow' does not exist on type 'DetailedHTMLProps<IframeHTMLAttributes<HTMLIFrameElement>, HTMLIFrameElement>'.

...which is true, it's not in index.d.ts. How can I forcibly add this attribute, or somehow cast iframe to any any type, etc?

Upvotes: 6

Views: 4013

Answers (2)

Lars Ejaas
Lars Ejaas

Reputation: 181

What worked for me using React 17.0.1 in gatsby 3.0.1:

create an index.d.ts file in your project. Include this code:

import "react";
    
declare module 'react' {
   export interface IframeHTMLAttributes<T> {
          controls?: 0 | 1
          fs?: 0 | 1
          hl?: string
        }
    }

Just an example - all available props can be seen in the Youtube Iframe doc: https://developers.google.com/youtube/player_parameters#origin

point to the index-file in the tsconfig.json-file:

"include": ["src/types/global.d.ts" ]

That's it!

Upvotes: 0

stickfigure
stickfigure

Reputation: 13556

The answer is to change the attribute from allow to data-allow.

Upvotes: 5

Related Questions