CODEWITHSUNDEEP
javascriptvideoyoutube-apiyoutube-data-api
Vipul
Vipul

Reputation: 431

Need to hide YouTube Branding with iFrame API

I am using YouTube iFrame API to load videos in my custom player (javascript player). I have a requirement to hide the Youtube branding however on iOS devices, it shows the logo with below parameters:

playerVars:
{
    'fs':1,
    'autoplay' : 0,
    'showinfo' : 0,
    'rel' : 0,
    'controls' : videoControls,
    'cc_load_policy' : 0,
    'color':'white',
    'modestbranding' : 1,
    'iv_load_policy' : 3,
    'loop':inv_loop,
    'wmode': 'transparent',
    'playlist':playlist,
    'playsinline':1
}

If I keep "showinfo" to 1, it hides the logo however it shows the video title, share and watch later icons along with ads.

is there any way to hide both (youtube logo and uploader info with ads) with iFrame API?

Thanks!

Upvotes: 3

Views: 1855

Answers (2)

Shubham Gupta
Shubham Gupta

Reputation: 1353

I hide everything except play/pause button.

I manage to do this with negative margins.

Check the code below -

<!DOCTYPE html>
<html>
    <style type="text/css">
        #offset{
            position: absolute;
            top: -300px;
            bottom: -300px;
            right: 0;
            left: 0;
            background-color: black;
            z-index: 12;
        }

        #payer-container{
            height: 450px;
            width: 800px;
            overflow: hidden;
            position: relative;
            z-index: 1;
        }

        
    </style>

    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <script src="https://www.youtube.com/iframe_api"></script>
    </head>

    <body>
        <div id="payer-container">
            <div id="offset">
                <div id="youTubePlayerDOM"></div>
            </div>
        </div>
    </body>

    <script type="text/javascript">
        
        var player;

        function onYouTubeIframeAPIReady() {

            
            player = new YT.Player('youTubePlayerDOM', {
                height: '100%',
                width: '100%',
                playerVars: {
                    "autoplay": 0,
                    "controls": 0,
                    "enablejsapi": 1,
                    "video_id": "QswsUQNDW_U"
                }
            });
        }

    </script>
</html>

Note:

  • You should have to create controllers manually if needed.
  • The aspect ratio of the video is fixed.

Upvotes: 1

Aakash
Aakash

Reputation: 1515

You can add modestbranding=1

This parameter lets you use a YouTube player that does not show a YouTube logo. Set the parameter value to 1 to prevent the YouTube logo from displaying in the control bar. Note that a small YouTube text label will still display in the upper-right corner of a paused video when the user's mouse pointer hovers over the player.

showinfo=0 will remove the title bar

Values: 0 or 1. The parameter's default value is 1. If you set the parameter value to 0, then the player will not display information like the video title and uploader before the video starts playing.

Also I don't think YouTube allows you to remove their name/logo completely.

Upvotes: 0

Related Questions