Skip to main content
Web Dev

Code a full width header video AirBnB style: Troubleshooting

By November 8, 2015December 22nd, 2015No Comments

Earlier during the year I did a screencast on coding a full width video header like AirBnB. Original post HERE I’ve collected all the questions and responses from youtube comments  so far for the screencast and compiled them here

There are a few common issues that people had:

  • Browser Support

 Question 1: The video doesn’t play on safari and IE is that normal? Firefox and Chrome are normal

 Answer 1: it may be that your version of Safari and IE haven’t been updated. To check what browsers support the  HTML5 video   tag have a look at this list which details every major browser

Question 2: I’m having a problem on Safari. Using width: 100% in the video tag in the CSS is causing the video to be pushed down by several hundred pixels in safari only. When I remove the width from the video tag the extra space goes away and the video is back at the top of the page but the video no longer scales and crops instead. Any thoughts? Thanks!

Answer 2: A workable solution is to use the media only query for safari (I’m assuming the width is larger than in chrome and firefox. More here https://scotch.io/quick-tips/default-sizes-for-twitter-bootstraps-media-queries

  • Sizing

Question 1: How do we get the video to say be shorter in height – without the video cutting out?

Answer 1: Try resizing the height of the header container rather than the video container or video. If you’re having aspect ratio issues read this: A workable solution is to use the media only query for safari (I’m assuming the width is larger than in chrome and firefox. More here https://scotch.io/quick-tips/default-sizes-for-twitter-bootstraps-media-queries

Question 2: Is there a way to make the video adjust to the height of the browser window?

Answer 2: Have you tried looking at the bootstrap container class? Media queries for .container (container class) are set to specific minimum screen widths (example 1200px), which in this case is set at 1170px. So you can change it there in your css file. Or you can set media queries to take 2 arguments. For example @media (min width: 920px) and  (max-width=1200px). To take care of the  inbetween states when the video resizing is a bit buggy. The video container need not be resized itseld as it is fixed within the header container and will shape accordingly.

  • Video

Question 1: I put volum=”0″ but still the audi plays?

Answer 1: The attribute “muted” so <video muted> should fix it. More from W3 Schools here

Question 2: When the video finished, how can we get a different video to play?

Answer 2: I would suggest putting in the source for the next video you would like to play next and see how that goes. The longer but smoother route is just editing the different videos you’d like to play  This ofcourse isn’t that flexible because you can’t come back to the code and change things easily

  • TWB:

Question 1: Hi why when I uploaded my Bootstrap in my server, it does not work? But when I preview in my computer, it works. What is wrong with Bootstrap? Is there anything I should know? Thanks

Answer 1: Try putting <source src=”video/cruise.ogv” type=”video/ogg” first, and then video/mp4 and then video/webm. Read more on StackOverflow here

  • Other

Question 1: Hey! Is it possible to do this without using the theme?? cuz I want to use my own styles. Thanks!

Answer 1: Hi, yes you can.

 

Leave a Reply