Use different YouTube preview image that is more likely to be available. Video alignment cosmetics.

src/components/SummitPhotos.vue

@@ -162,11 +162,7 @@ export default {
 </script>
 
 <style scoped>
-.inline {
-  display: inline-block;
-  vertical-align: top;
-}
-.inline > div {
+.inline, .inline > div {
   display: inline-block;
   vertical-align: top;
 }

src/components/SummitVideos.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="inline">
     <div v-for="group in groups" :key="group.key" class="video-group-wrapper">
       <SummitVideosGroup :videos="group.videos" :title="group.title" :titleLink="group.titleLink" />
     </div>
@@ -67,4 +67,8 @@ export default {
 .video-group-wrapper:not(:last-child) {
   margin-bottom: 0.75rem;
 }
+.inline, .inline > div {
+  display: inline-block;
+  vertical-align: top;
+}
 </style>

src/components/SummitVideosGroup.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="video-group">
+  <div class="video-group box">
     <div class="video-group-title">
       <router-link v-if="titleLink" :to="titleLink">{{ title }}</router-link>
       <span v-else>{{ title }}</span>
     </div>
-    <LazyYoutubeVideo v-for="video in videos" :key="video.src" :src="video.src" />
+    <LazyYoutubeVideo v-for="video in videos" :key="video.src" :src="video.src" previewImageSize="hqdefault" :webp="false" />
   </div>
 </template>
 
@@ -49,6 +49,7 @@ export default {
   background: whitesmoke;
   padding: 0.25rem 0 0 0.75rem;
   display: inline-block;
+  margin-right: 0.75rem;
 }
 .video-group-title {
   color: #777;