THE SECONDHANDSMOKE.COM

HTML 

  <div class="about about-reverse">
           <div class="left">
               <div class="media_box media_box--small">
                   <img class="media_image" src="img/1_ART.jpg" alt="tyblue">
               </div>
           </div>
           <div class="right">
               <div class="media_box media_box--small">
                   <img class="media_image" src="img/1_IMG_FLOWER.jpg" alt="tyblue">
               </div>
               <div class="media_box media_box--small">
                   <img class="media_image" src="img/1_SKY.jpeg" alt="tyblue">
               </div>


<div class="hero-video">
       <div class="media_box media_box--backvideo">
           <video loop autoplay class="media_image">
               <source src="video/WEBSITEBACKGROUNDVIDEO.webm" type="video/webm">
               <source src="video/WEBSITEBACKGROUNDVIDEO.mp4" type="video/mp4">
           </video>

I wanted to share some of the HTML I used for my website. I was able to use this code to add a looping video to the background of my site! The HTML used allows the video to be responsive on any device or browser. I used Handbreak to turn my files into mp4/webm files to ensure that the videos were properly formatted.

Leave a comment

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