Shrink a YouTube video to responsive width

Question

I have a YouTube video embedded on our website and when I shrink the screen to tablet or phone sizes it stops shrinking at around 560px in width  Is this standard for YouTube videos or is there something that I can add to the code to make it go smaller

User · Answer

I used the CSS in the accepted answer here for my responsive YouTube videos - worked great right up until YouTube updated their system around the start of August 2015. The videos on YouTube are the same dimensions but for whatever reason the CSS in the accepted answer now letterboxes all our videos. Black bands across top and bottom.

I've tickered around with the sizes and settled on getting rid of the top padding and changing the bottom padding to 56.45%. Seems to look good.

.videowrapper {
    position: relative;
    padding-bottom: 56.45%;
    height: 0;
}

User · Answer

I make this with simple css as follows  HTML CODE   lt iframe id  vid  src  https   www youtube com embed RuD7Se9jMag  frameborder  0  allowfullscreen gt  lt  iframe gt    CSS CODE   lt style type  text css  gt   vid    max-width  100   height  auto

User · Answer

If you are using Bootstrap you can also use a responsive embed  This will fully automate making the video s  responsive   http   getbootstrap com components  responsive-embed  There s some example code below    lt  -- 16 9 aspect ratio -- gt   lt div class  embed-responsive embed-responsive-16by9  gt     lt iframe class  embed-responsive-item  src       gt  lt  iframe gt   lt  div gt    lt  -- 4 3 aspect ratio -- gt   lt div class  embed-responsive embed-responsive-4by3  gt     lt iframe class  embed-responsive-item  src       gt  lt  iframe gt   lt  div gt

User · Answer

You can make YouTube videos responsive with CSS  Wrap the iframe in a div with the class of  videowrapper  and apply the following styles    videowrapper       float  none      clear  both      width  100       position  relative      padding-bottom  56 25       padding-top  25px      height  0     videowrapper iframe       position  absolute      top  0      left  0      width  100       height  100       The  videowrapper div should be inside a responsive element  The padding on the  videowrapper is necessary to keep the video from collapsing  You may have to tweak the numbers depending upon your layout

User · Answer

This is old thread  but I have find new answer on https   css-tricks com NetMag FluidWidthVideo Article-FluidWidthVideo php  The problem with previous solution is that you need to have special div around video code  which is not suitable for most uses  So here is JavaScript solution without special div      Find all YouTube videos - RESIZE YOUTUBE VIDEOS    var  allVideos      iframe src   https   www youtube com          The element that is fluid width  fluidEl      body        Figure out and save aspect ratio for each video  allVideos each function            this       data  aspectRatio   this height   this width          and remove the hard coded width height      removeAttr  height        removeAttr  width             When the window is resized   window  resize function          var newWidth    fluidEl width            Resize all videos according to their own aspect ratio      allVideos each function              var  el     this            el          width newWidth           height newWidth    el data  aspectRatio                  Kick off one resize to fix all videos on page load    resize        END RESIZE VIDEOS

User · Answer

See full gist here and live example here    hero   width 100  height 100  background url    img ps dir cms how-it-works hero jpg   no-repeat top center     videoWrapper   position relative padding-bottom 56 25  padding-top 25px max-width 100          lt div id  hero  gt       lt div class  container  gt           lt div class  row-fluid  gt               lt script src  https   www youtube com iframe api  gt  lt  script gt               lt center gt               lt div class  videoWrapper  gt                    lt div id  player  gt  lt  div gt               lt  div gt               lt  center gt               lt script gt              function onYouTubeIframeAPIReady                      player   new YT Player  player                        videoId  xxxxxxxxxxx  playerVars     controls 0 autoplay 0 disablekb 1 enablejsapi 1 iv load policy 3 modestbranding 1 showinfo 0 rel 0 theme  light                                         resizeHeroVideo                                 lt  script gt           lt  div gt       lt  div gt   lt  div gt      var player   null     document   ready function         resizeHeroVideo            window  resize function         resizeHeroVideo         function resizeHeroVideo         var content       hero        var contentH   viewportSize getHeight        contentH -  158      content css  height  contentH        if player    null            var iframe       videoWrapper iframe            var iframeH   contentH - 150          if  isMobile                iframeH   163                     iframe css  height  iframeH           var iframeW   iframeH 9   16          iframe css  width  iframeW             resizeHeroVideo is called only after the Youtube player has fully loaded  on page load does not work   and whenever the browser window is resized   When it runs  it calculates the height and width of the iframe and assigns the appropriate values maintaining the correct aspect ratio   This works whether the window is resized horizontally or vertically

User · Answer

Okay  looks like big solutions    Why not to add width  100   directly in your iframe      So your code would looks something like  lt iframe style  width  100        gt  lt  iframe gt   Try this it ll work as it worked in my case    Enjoy

User · Answer

With credits to previous answer https   stackoverflow com a 36549068 7149454  Boostrap compatible  adust your container width  300px in this example  and you re good to go    lt div class  embed-responsive embed-responsive-16by9  style  height  100    width  300px    gt   lt iframe class  embed-responsive-item  src  https   www youtube com embed LbLB0K-mXMU start 1841  allow  accelerometer  autoplay  encrypted-media  gyroscope  picture-in-picture  allowfullscreen    frameborder  0  gt  lt  iframe gt   lt  div gt

User · Answer

Refined Javascript only solution for YouTube and Vimeo using jQuery      -- After the document is ready   function          Find all YouTube and Vimeo videos   var  allVideos      iframe src   www youtube com    iframe src   player vimeo com            Figure out and save aspect ratio for each video    allVideos each function           this         data  aspectRatio   this height   this width           and remove the hard coded width height        removeAttr  height          removeAttr  width                When the window is resized     window  resize function            Resize all videos according to their own aspect ratio      allVideos each function           var  el     this            Get parent width of this video       var newWidth    el parent   width           el          width newWidth           height newWidth    el data  aspectRatio                   Kick off one resize to fix all videos on page load      resize          Simple to use with only embed    lt iframe width  16  height  9  src  https   www youtube com embed wH7k5CFp4hI  frameborder  0  allowfullscreen gt  lt  iframe gt    Or with responsive style framework like Bootstrap    lt div class  row  gt     lt div class  col-sm-6  gt      Stroke Awareness    lt div class  col-sm-6 gt       lt iframe width  16  height  9  src  https   www youtube com embed wH7k5CFp4hI  frameborder  0  allowfullscreen gt  lt  iframe gt     lt  div gt   lt  div gt     Relies on width and height of iframe to preserve aspect ratio Can use aspect ratio for width and height  width  16  height  9   Waits until document is ready before resizing Uses jQuery substring    selector instead of start of string    Gets reference width from video iframe parent instead of predefined element Javascript solution No CSS No wrapper needed   Thanks to  Dampas for starting point  https   stackoverflow com a 33354009 1011746

User · Answer

magi182 s solution is solid  but it lacks the ability to set a maximum width  I think a maximum width of 640px is necessary because otherwhise the youtube thumbnail looks pixelated    My solution with two wrappers works like a charm for me    videoWrapperOuter     max-width 640px     margin-left auto    margin-right auto     videoWrapperInner     float  none    clear  both    width  100     position  relative    padding-bottom  50     padding-top  25px    height  0     videoWrapperInner iframe     position  absolute    top  0    left  0    width  100     height  100      lt div class  videoWrapperOuter  gt     lt div class  videoWrapperInner  gt       lt iframe src    www youtube com embed C6-TWRn0k4I         frameborder  0  allowfullscreen gt  lt  iframe gt     lt  div gt   lt  div gt    I also set the padding-bottom in the inner wrapper to 50    because with  magi182 s 56    a black bar on top and bottom appeared

[youtube] Shrink a YouTube video to responsive width

Examples related to youtube

Examples related to responsive-design

Examples related to embed