React iframe youtube : Object.defineProperty called on non-object

Question

I made a component to embed a youtube video in my React app and it works great.

To do that i'm using an iframe.

 <div className="embed-responsive embed-responsive-16by9">
            <iframe className="embed-responsive-item" src={`${BASE_URL}${videoId}`}/>
 </div>

But even if it works, I don't know why but I got this error.

sw.js:5 Uncaught TypeError: Object.defineProperty called on non-object

This seems to be a youtube issue because if I use another URL in my iframe than : https://www.youtube.com/embed/ZJD1zoAaCmo like for example : https://www.dailymotion.com/embed/video/xwr14q

I'll not have the error anymore

If you have any idea it would be really appreciated

Thanks by advance !

Having the same issue in Angular 4. Here is my embed code: <ion-item *ngIf="(sidenav$ | async) && ((sidenav$ | async)?.tutorialVideo)"> <div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" width="560" height="315" [src]="(sidenav$ | async)?.tutorialVideo | youtube" frameborder="0" allowfullscreen></iframe> </div> </ion-item> — Hugh Hou

mico mico · Accepted Answer · 2017-04-21T03:38:24

You should use class instead of className in your html.

Yes, it is true you refer to those as className on js code, but the reserved word is class in html.

Javascript does not recognize className like that in all situations, so thus the error.

Edit: actually, className is for React and class is for normal html. This code uses features of Bootstrap and it uses html markups.

React iframe youtube : Object.defineProperty called on non-object

1 Answers