Shrink a YouTube video to responsive width

by

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.

More Related Contents:

  1. What is that in youtube API
  2. YouTube API to fetch all videos on a channel
  3. How to check if YouTube channel is streaming live
  4. how to share a video from my website on facebook like youtube
  5. Retrieve all videos from youtube playlist using youtube v3 API
  6. How can I get a channel ID from YouTube?
  7. YouTube embed gives “restricted from playback on certain sites” error despite API metadata indicating otherwise
  8. How to play YouTube content on tvOS
  9. Youtube api v3 Get list of user’s videos
  10. Auto-Full Screen for a Youtube embed
  11. Youtube player support fragment no longer working on Android studio 3.2 (androidx)
  12. Getting youtube.com to load in iFrame
  13. How to obtain a feed of comments entered through the ‘chat’ box during a YouTube live broadcast?
  14. How can I embed a YouTube video on GitHub wiki pages?
  15. How to get the mp4 url for Youtube videos using Youtube v3 API
  16. how to map youtube handles to channel IDs
  17. ffprobe or avprobe not found. Please install one
  18. start/play embedded (iframe) youtube-video on click of an image
  19. How to find if a youtube channel is currently live streaming without using search?
  20. youtube api v3 page tokens
  21. How can I get the actual video URL of a YouTube live stream?
  22. Force youtube embed to start in 720p
  23. Why does the order of media queries matter in CSS?
  24. Embedding Image in Shiny App
  25. How to autoplay a YouTube video in a UIWebView
  26. Responsive horizontal page sliding
  27. Responsive Images with CSS
  28. Embed an External Page Without an Iframe?
  29. Set div height equal to screen size
  30. YouTube Autoplay does not work with iFrame

Leave a Comment