video-wrap‘s maximum width (I added some styles here to center the video on the page). Instead, you can do it all with CSS using the :before pseudo element. But that adds extra markup to your page and is going to be hard to remember. You could do a double video wrap, essentially wrapping your video in two containers: one with a fixed with, and one that makes it responsive. When restricting the width to 700px, the padding is still based off 1200px, and the entire thing gets weird. video-wrap‘s parent, which happens to be a 1200px content area. video-wrap is actually calculating 56.25% of the. And, confusingly, the top and bottom percentages are based on the parent container’s width. You see, in CSS, percentage-based padding is based on the parent container. Change the line max-width: 100% to something smaller, say 700px. The obvious fix would be to restrict the. It also looks a little wonky: That’s a big video. That’s a lot of screen real estate taken up by a video. But once you get into large, full-width layouts, having a video that takes up the full screen might not be desirable.įor example – if your content area is 1200px wide, and you use this method, your video is going to be 675px tall. The video is always going to be 100% of the parent container. The only problem with this method (well, besides manually requiring you to put each video in a wrapper) is that it doesn’t allow you to restrict the video’s width. With very little CSS, you too can have videos that look normal on all screen sizes! But it can be better. On phones, you get a clean normal-looking video player, without the “wide screen” effect: This will resize the video on mobile, making sure it maintains it’s 16:9 aspect ratio and doesn’t crop into a weird square:Īnd it really does look nice. Their CSS will look something like this: /* Container/Wrapper Styles */Īnd every time they add a video, they have to manually add the wrapper, like so: So, often times developers just include their own responsive video CSS and make sure that all added videos get wrapped in a special container so they respond properly. Since it automatically detects where the videos are and inserts the video container, it requires no extra work on the user’s part.īut adding extra JavaScript to your website can slow it down. There are scripts, like FitVids, which use JavaScript to wrap embedded videos in a fluid-width container. The standard way to embed a video responsively is to put it some kind of container or wrapper that has a fixed aspect ratio (usually 16:9) and then absolutely position the video within the container, so it takes up all of the available space. So for years, designers and developers have been coming up with better responsive video solutions. It doesn’t really inhibit the user from playing the video. Like when you were watching a “wide screen” movie on a square CRT TV in like, 2001. When you play the video, the inside will resize to the correct aspect ratio, so you have a lot of extra black space at the top and the bottom. Ultimately, this results in cropping the video down to a weird square. You see, by default, YouTube videos “respond” by shrinking their width but keeping their height. Especially when you’re trying to embed a video from YouTube or Vimeo.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |