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.
