Teaching Newbies since 2014

  • Home
  • Javascript ❤
    • JavaScript
    • Node.js
  • WebDev Tuts
  • screencasts
  • Resources
  • VR & AR
  • Github
  • Twitter
  • YouTube
  • RSS
  • C++
You are here: Home / Web Dev / Full Webpage Video Background in Twitter Bootstrap

November 1, 2014 by: Kauress

Full Webpage Video Background in Twitter Bootstrap

moosefry_video_header

 

Check this out pretty cool: http://kauress.github.io/MooseFrye/

Done with Twitter Bootsrap 3 , change media queries to show a background pic on phones. Code for it is:

     <div class =”section”>
<div class=”text-vertical-center”>
<video autoplay loop poster=”img/bg.png” id=”bgvid”>
<source src=”vid/1.webm” type=”video/webm”>
<source src=”vid/2.mp4″ type=”video/mp4″>
<source src=”vid/3.ogg” type=”video/ogg”/>
</video>
</div>

I modified it just a bit from the original source (launchrocket). A boot snipp is also available here but it doesn’t work for me…

http://bootsnipp.com/snippets/featured/ful-screen-video-background

Twitter Bootstrapping it in a day
Another Bootstrap Video Header

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Copyright © 2022 ·Kauress

Go to mobile version