Mixing video and image content on the same page

Throughout this book, we've seen some of the tips and tricks we need to use to make our media content responsive and worked through some examples of the styles we need to implement to make this happen.

However, it is unlikely that every responsive site will have either images or videos; it is more likely that there will be a mix of both on at least some sites! This can present its own issues, so to see what can happen, let's run through a simple demo.

From the code download, extract the code folder for this chapter and save it to your project folder; this contains a simple demo that shows the issues we face with mixing videos and images together in a responsive design. If we run the mix-responsive.html demo as it stands, it would appear to look okay from the start until we scroll down and view the video. The layout is not ideal, but there are a few changes we can make:

• The banner image at the top of the browser window is too large. While this...