This post covers my work on the Embedding Images and Video assignment from the HTML5 and CSS3 course from The Odin Project.

This assignment practices embedding images and video into a recreation of the YouTube video player page. The assignments main focus is on ensuring you learn how to embed media but it has the secondary effect of continuing to practice HTML structure and CSS layout techniques.

What I learned

I increased my knowledge of the intricacies of using Flexbox to layout the page and ran into issues with making the layout responsive.

What I should improve

Future work should seek to improve responsive design from the inception, not attempt to add it once the majority of design decisions have been made. Further investigation into making embedded video responsive would also be useful.

Embedding Images and Video - Completed Project

You can view the completed project in your browser at the following link:

Josh Archer's completed project - Embedding Images and Video | The Odin Project

View the completed projects source files

Below are direct links to the final .html, .css and img files for the completed project. You can use these as example/inspiration.

It's not a good idea to just copy as you'll not get any benefit but hopefully they help you work out whatever issue you are trying to solve:

GitHub repo

Josh Archer's solution - completed .html file

Josh Archer's solution - completed .css file

Josh Archer's solution - completed img files

View the assigment page on The Odin Project

You can view the assignment at the link below:

Embedding Images and Video - The Odin Project