0

I've used jQuery.YoutubeBackground for my background video on my website (apexonlineracing.com/home)

However, if you adjust the browser all responsive code is dropped and the video becomes massive. I've tried setting "overflow:hidden;" to hide the original overflow. I've also tried dropped "max-width:100%;" which again does nothing.

HTML: 

<div id="video"></div>

jQuery: 

  <script>
jQuery(function($) {

  $('#video').YTPlayer({
    fitToBackground: true,
    playerVars: {rel: 0},
    videoId: '2kZ7BsU2y7U',
    pauseOnScroll: false,
    playerVars: {
      modestbranding: 1,
      autoplay: 1,
      loop: 1,
      controls: 1,

      rel: 0,
      autohide: 0
    }
  });


});

CSS:

<style>
#video{
 position: relative;
 background: transparent;
 overflow:hidden;
}

.ytplayer{
 position: absolute;

 top: 0;
 z-index: 0;
}
</style>

Can anyone shed any light exactly what is causing this and how I can prevent it (i'd also like to drop overflow:hidden; but this causes the browser to scroll left, which I don't want.)

Dan Hawkins
  • 177
  • 12
  • Just to bump this - I've tried setting it in a container so:
    then I set a max-width and width attribute, this didn't work either, it seems the video just ignores any css when you adjust the browser width.     – Dan Hawkins Aug 04 '18 at 12:53
  • Dan, please check [this answer](https://stackoverflow.com/a/22823070/4092887) or search `youtube iframe player api responsive`. – Mauricio Arias Olave Jan 11 '19 at 22:05

0 Answers0