武田です。
授業で「好きな動画ベスト3」というサイトを学生の課題として与えたのですが、その時考えたレイアウトです。
大雑把に言うと、HTMLのdivタグで枠（今回はclass=”video”で指定したdiv枠）を作っておいて、CSSのdisplayプロパティをinline-blockにすると枠が動画や画像の大きさに合わせられるので、あとはタイトルやコメントを同じdivタグの中に入れてそれっぽく見せています。
枠が浮いて見えるようにCSSに「box-shadow: #ddd 5px 5px 20px;」などとして指定しています。
今回は学生からも質問のあった独自フォントをサイトで使えないのか？という部分もやってみました。
以下のサイトが参考になります。
日本語フリーフォントからウェブフォントを作成する方法 ｜ システムエクスプレス株式会社
今回使用したフォントは、かに沢のりおさんのサイトからフリーのCheekフォントを使わせて頂きました。
Cheekふぉんと（フリーフォント）｜かに沢のりおのいろいろサイト
フォントを変えるだけでもかなり雰囲気が変わるものです。
興味のある方は、表示したサイトでCtrl + Uキーを押してHTMLやCSSの中身を見てみてください。