Prevent navigation to YouTube Application on clicking title Link on the Player using sandbox iframe attribute

[isaacking5]

Description

Our use case is to prevent navigation to the YouTube application on clicking the video title link. I couldn't find any relevant standard solution for this in the YouTube iframe API reference too.

On googling, I got to know that we can achieve this using an iframe sandbox attribute. However, react-youtube does not accept any sandbox attribute.

But, as we could use the iframe tag instead of div tag while using the API (YouTube iframe API reference),

I have changed <div> as <iframe> and gave the sandbox attribute in react-youtube package, as :point_down:

Before:

function render() {
      return React.createElement(
        'div',
        { className: this.props.containerClassName },
        React.createElement('div', { id: this.props.id, className: this.props.className, ref: this.refContainer })
      );
    }

After:

function render() {
      return React.createElement(
        'div',
        { className: this.props.containerClassName },
        React.createElement('iframe', {src:`https://www.youtube.com/embed/${this.props.videoId}`, id: this.props.id, className: this.props.className, ref: this.refContainer, sandbox:'allow-forms allow-scripts allow-pointer-lock allow-same-origin' })
      );
    }

And hence, my use-case was satisfied, but i don't know if this approach is a standard one or it breaks any existing functionality :confused:

Is there any better approach we can do?

Browsers

Chrome 89

Platforms

Linux

Other JavaScript

React ^16.12.0 mobx 5.15.0