Remove black borders for a youtube embed

Question

I am trying to embed a youtube video on the background of my website. I have this working and it is responsive, except that when my embed video is widescreen (16:9) but my viewport is for example square (1:1), it creates black borders to compensate for the leftover space.

enter image description here

I was wondering if there was an option to crop the video so that the 'center' of the video is always in the screen, just like in the example image above. The leftover parts would be cut off. I think the CSS equivalent for images would be background-size: cover;.

Here is the code I have at this moment. Try to make your viewport square and you will see the black borders. It's also available in a jsfiddle.

<html>
<head>
    <style>
        body,html{ margin:0; padding:0; height:100%;}

        div.bg_utube {
            position: fixed;
            z-index: -99999;
            -webkit-user-select: none;
            user-select: none;
            width: 100%;
            height: 100%;
        }
        #player{
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
<div class="bg_utube">
    <div id="player"></div>
    <script>
        var tag = document.createElement('script');
        tag.src = "http://www.youtube.com/player_api";
        var firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

        var player;
        var video_id = 'JQ7a_8psCn0';

        function onYouTubePlayerAPIReady() {
            player = new YT.Player('player', {
                height: '390',
                width: '640',
                videoId: video_id,
                playerVars: {
                    'autoplay': 1,
                    'controls': 0,
                    'html5': 1,
                    'modestbranding': 1,
                    'showinfo': 0,
                    'related': 0},

                events: {
                    'onReady': onPlayerReady,
                    'onStateChange': onPlayerStateChange
                }
            });
        }

        function onPlayerReady(event) {
            event.target.playVideo();
            player.mute();
            event.target.setPlaybackQuality('hd720');
        }

        function onPlayerStateChange(event) {

            if (event.data == YT.PlayerState.PLAYING ) {

            }

            if(event.data === YT.PlayerState.ENDED){
                player.loadVideoById(video_id);
            }
        }
    </script>
</div>
</body>
</html>

I did search on google for solutions but couldn't find any. Many were specifically for <object> and <embed>, using the old youtube embed style. I'm using the YouTube API to render a HTML5 player.

Could someone give me a push in the right direction?

I don't think I have the control over the YouTube API in what way it generate the code for my video. At the moment it will become an iframe. Besides, the ` — cpb2, Apr 30 '15 at 10:02
@user1129884 I actually only care about Firefox / Safari / Chrome / Android (default browser?) / and iPhone (Safari/Chrome). Would they all be HTML5? — cpb2, Apr 30 '15 at 10:28
If those browsers are all up to date then yes, they are all HTML5. They do all support different codecs though. Check out this question: http://stackoverflow.com/questions/19836015/youtube-url-in-video-tag — timo, Apr 30 '15 at 10:34
http://stackoverflow.com/questions/13220715/removing-black-borders-43-on-youtube-thumbnails/42338572#42338572 — Pranav Bilurkar, Feb 20 '17 at 07:37

score 7 · Accepted Answer · answered Apr 30 '15 at 10:08

Player creates iframe in which the video plays with youtube This represents a problem because you can not change the parameters of objects in cross domains. The object who contans video is in player.c.contentWindow.querySelector(".video-stream.html5-main-video")

Only solution I now is to transform container .bg_utube with css like this

div.bg_utube {
        position: fixed;
        z-index: -99999;
        -webkit-user-select: none;
        user-select: none;
        width: 100%;
        height: 100%;
        -ms-transform: scale(2,3);
      -webkit-transform: scale(2,3);
      transform: scale(2,3);
    }

Thank you for your solution. This is obviously not the best solution, but it'll do for now until I have a better one. — cpb2, Apr 30 '15 at 10:29

Remove black borders for a youtube embed

1 Answers1