In Magento 2, how do I remove the YouTube icon button for product video on the product detail page?

Question

In Magento 2, how do I remove the YouTube icon button on product video on product detail page? I also need to remove the copy link and subtitles/closed captions. Please tell me if anyone knows.

Answer 1

I had the facing same problem , You need to add the controls=0 parameter in url for disable the video controls.

replace the code given fuction [ _initialize: function () , _create: function () ] in this file load.player.js (file path : vendor/magento/module-product-video/view/frontend/web/js/load-player.js)

 /**
     * Initializes variables
     * @private
     */
    _initialize: function () {
        this._params = this.element.data('params') || {};
        this._code = this.element.data('code');
        this._width = this.element.data('width');
        this._height = this.element.data('height');
        this._autoplay = !!this.element.data('autoplay');
        this._playing = this._autoplay || false;
        this._loop = this.element.data('loop');
        this._rel = this.element.data('related');
        this.useYoutubeNocookie = this.element.data('youtubenocookie') || false;

        this._responsive = this.element.data('responsive') !== false;

        if (this._responsive === true) {
            this.element.addClass('responsive');
        }

        this._calculateRatio();
    },
/**
     * Initialization of the Youtube widget
     * @private
     */
    _create: function () {
        var self = this;

        this._initialize();

        this.element.append('<div></div>');

        this._on(window, {

            /**
             * Handle event
             */
            'youtubeapiready': function () {
                var host = 'https://www.youtube.com';

                if (self.useYoutubeNocookie) {
                    host = 'https://www.youtube-nocookie.com';
                }

                if (self._player !== undefined) {
                    return;
                }
                self._autoplay = true;

                if (self._autoplay) {
                    self._params.autoplay = 1;
                }

                if (!self._rel) {
                    self._params.rel = 0;
                }

                self._player = new window.YT.Player(self.element.children(':first')[0], {
                    height: self._height,
                    width: self._width,
                    videoId: self._code,
                    playerVars: self._params,
                    host: host,
                    events: {

                        /**
                         * Get duration
                         */
                        'onReady': function onPlayerReady() {
                            self._player.getDuration();
                            self.element.closest('.fotorama__stage__frame')
                                .addClass('fotorama__product-video--loaded');
                        },

                        /**
                         * Event observer
                         */
                        onStateChange: function (data) {
                            switch (window.parseInt(data.data, 10)) {
                                case 1:
                                    self._playing = true;
                                    break;
                                default:
                                    self._playing = false;
                                    break;
                            }

                            self._trigger('statechange', {}, data);

                            if (data.data === window.YT.PlayerState.ENDED && self._loop) {
                                self._player.playVideo();
                            }
                        }
                    }

                });
            }
        });

        this._loadApi();
    },

replace by this code.........

 /**
     * Initializes variables
     * @private
     */
    _initialize: function () {
        this._params = this.element.data('params') || {};
        this._code = this.element.data('code');
        this._width = this.element.data('width');
        this._height = this.element.data('height');
        this._autoplay = !!this.element.data('autoplay');
        this._playing = this._autoplay || false;
        this._loop = this.element.data('loop');
        this._rel = this.element.data('related');
        this._controls = this.element.data('controls');
        this._showinfo = this.element.data('showinfo');
        this.useYoutubeNocookie = this.element.data('youtubenocookie') || false;

        this._responsive = this.element.data('responsive') !== false;

        if (this._responsive === true) {
            this.element.addClass('responsive');
        }

        this._calculateRatio();
    },
_create: function () {
        var self = this;

        this._initialize();

        this.element.append('<div></div>');

        this._on(window, {

            /**
             * Handle event
             */
            'youtubeapiready': function () {
                var host = 'https://www.youtube.com';

                if (self.useYoutubeNocookie) {
                    host = 'https://www.youtube-nocookie.com';
                }
                if (self._player !== undefined) {
                    return;
                }
                self._autoplay = true;

                if (self._autoplay) {
                    self._params.autoplay = 1;
                }  
                    self._params.controls = 0;
                    self._params.showinfo=0;


                if (!self._rel) {
                    self._params.rel = 0;
                }

                self._player = new window.YT.Player(self.element.children(':first')[0], {
                    height: self._height,
                    width: self._width,
                    videoId: self._code,
                    playerVars: self._params,
                    
                    host: host,
                    
                    events: {

                        /**
                         * Get duration
                         */
                        'onReady': function onPlayerReady() {
                            self._player.getDuration();
                            self.element.closest('.fotorama__stage__frame')
                                .addClass('fotorama__product-video--loaded');
                        },

                        /**
                         * Event observer
                         */
                        
                        onStateChange: function (data) {
                            switch (window.parseInt(data.data, 10)) {
                                case 1:
                                    self._playing = true;
                                    break;
                                default:
                                    self._playing = false;
                                    break;
                            }

                            self._trigger('statechange', {}, data);

                            if (data.data === window.YT.PlayerState.ENDED && self._loop) {
                                self._player.playVideo();
                            }
                        }
                    }
                    

                });
            }
        });
        this._loadApi();
    },

see the image after add the controls=0 parameter in url [https://www.youtube-nocookie.com/embed/_2gyKBy-Q8Q?autoplay=1&controls=0&showinfo=0&rel=0&enablejsapi=1&origin=http%3A%2F%2Fgdjewellery.com]

Hope this may help you.....

Answer 2

To not show additional settings in video, You can add the parameter in iframe controls=0 to your video URL and then not show additional settings. As-:

<iframe frameborder="0" allowfullscreen="" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" title="Yug ram raj" width="100%" height="100%" src="youtube-nocookie.com/embed/…" id="widget2"></iframe>

You need to add parameter in this file path vendor/magento/module-product-video/view/frontend/web/js/load-player.js

Need to add changes below line in this function -:

_initialize: function () 
this._controls = this.element.data('controls');

And below on this condition need to add-:

self._params.controls = 0;

if (self._autoplay)
{
   self._params.autoplay = 1;
}
self._params.controls = 0;

Answer 3

You can hide the controls using additional parameters. Please follow this link to learn about youtube parameters.

{youtube embed url }?version=3&autoplay=1&controls=0&loop=0&rel=0

Thank you.

Answer 4

It appears that YouTube no longer supports this customization, so we can not to remove their name and logo from the video.

Ref links:

https://stackoverflow.com/questions/18893902/how-to-remove-youtube-branding-after-embedding-video-in-web-page https://developers.google.com/youtube/player_parameters#modestbranding