Menu
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.
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?
632
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);
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
