6

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?

stickfigure
  • 13,458
  • 5
  • 34
  • 50
  • If moving to react 16 is not an option - there's still a trick to make it work - check out this question https://stackoverflow.com/questions/31273093/how-to-add-custom-html-attributes-in-jsx – Stas Parshin Feb 03 '18 at 00:56

2 Answers2

5

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

stickfigure
  • 13,458
  • 5
  • 34
  • 50
0

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!

Lars Ejaas
  • 153
  • 9