Responsive Media in HTML5 -- Table of Contents -- Responsive Media in HTML5 -- Credits -- About the Author -- About the Reviewers -- www.PacktPub.com -- Support files, eBooks, discount offers, and more -- Why subscribe? -- Free access for Packt account holders -- Preface -- What this book covers -- What you need for this book -- Who this book is for -- Conventions -- Reader feedback -- Customer support -- Downloading the example code -- Downloading the color images of this book -- Errata -- Piracy -- Questions -- 1. Working with Responsive Images -- Getting started -- Beginning with fluid images -- Catering to vendor prefixes and image formats -- Catering to different platforms -- Catering to HD or retina images -- Using sprites to display responsive images -- Determining the available viewport for use -- Using CSS to set our viewport -- Getting the viewport using JavaScript -- Working out media queries -- Using pure JS to determine page breakpoints -- Using data tags to allow bandwidth constraints -- Working with the tags -- Maintaining the tag in our code -- Working with the SVG image format for scalability -- Using image icons for scalability -- Building a responsive carousel -- Creating responsive maps using Google Maps -- Summary -- 2. Adding Responsive Video Content -- Getting ready -- Determining support for formats -- Choosing the right format -- Embedding HTML5 video content -- Determining an available viewport for use -- Catering to fallback support -- Using JS libraries to provide support -- Catering to different platforms -- Allowing for vendor prefixes -- Displaying full-size videos -- Summary -- 3. Mixing Content -- Mixing video and image content on the same page -- Considering the pitfalls of mixing content -- Using preloaders to reduce delays -- Adding lazy loading support to our pages.

Making allowances for mobile devices -- Creating responsive images automatically -- Automating the shrinking process -- Summary -- 4. Testing Responsive Media -- A starting point for testing -- Using Google Chrome or Opera -- Using Firefox -- Using Internet Explorer -- Considering pitfalls of responsive testing -- Testing responsive sites with online tools -- Using tools to determine speed -- Analyzing results -- Digging further into the code -- Revealing all -- Fixing the problem -- Summary -- 5. Using Frameworks -- Introducing our three examples -- Adding responsive media to a CMS -- Adding responsive media manually -- Fixing a responsive issue -- Using plugins to add responsive images -- Adding responsive videos using plugins -- Using plugins to embed videos -- Implementing responsive media in Bootstrap -- Using Bootstrap's CSS classes -- Using Less CSS to create responsive content -- Working through the code in detail -- Transferring to production use -- Summary -- Index.