How to style multiple videos with html and css

Proper and rich HTML markup

Present multiple videos beautifully on your webpage with correct html markup.

Style with css

Adjust flexbox to find the style you prefer for the flow of your multiple videos. In the example we choose to show videos at 100% of their container width and therefor use a simple column flow with no wrapping. If you prefer, you could for example instead easily switch to a row flow inside any media query to show several videos side by side on desktop at 50% (2 side by side) or 33% (3 side by side) width.

Dont forget the Schema.org markup

Make sure to include proper markup for your videos. We recommend Schema.org:s VideoObject. Youtube already implements strong markup for their videos with Schema.org. Take note of how we utilize the already existing Schema.org objects from youtube.com by supplying the correct (globally unique) link data @id. Effectively we inherit all the data to our own object, leaving us with rich contextual markup without the hassle. You can inspect the Youtube object in Googles Structured Data Testing Tool here.