fix video styles for desktop and mobile

web/blog/2024-11-22-most-annoying-cookie-consent-banners.md

@@ -1,9 +1,10 @@
 ---
-title: 'Our Community Made the Most Annoying Cookie Consent Banners'
+title: 'We Made the Most Annoying Cookie Banners Ever'
 authors: [vinny]
 image: /img/cookie-banner-hackathon/banner.webp
 tags: [webdev, wasp, react, forms]
 ---
+
 import ReactPlayer from 'react-player'
 import ImgWithCaption from './components/ImgWithCaption'
 
@@ -11,32 +12,28 @@ import ImgWithCaption from './components/ImgWithCaption'
 
 We at Wasp just finished off a fun little [hackathon](https://docs.opensaas.sh/blog/2024-10-10-most-annoying-cookie-banner-contest/) where we asked our users to create the most annoying cookie consent banners they could think of (because cookie banners aren’t annoying enough already, right?). Then we let our community pick the winner in an elimination style tournament on [X/Twitter](https://x.com/wasp_lang).
 
-<ImgWithCaption
-    alt="Cookie Banner Voting"
-    source="img/cookie-banner-hackathon/cookie-banner-tournament.png"
-    width="80%"
-/>
-
 It was a lot of fun, and the submissions were really creative, so we thought we’d highlight some of our favorites for you, including the community chosen winner. Check ‘em out below. We hope they inspire you... to... not use them on your own sites. :)
 
 ## The GDPR Quiz
 
-The General Data Protection Regulation (GDPR) is the EU's data privacy law that requires websites to get explicit consent from users before collecting their data through cookies. 
+The General Data Protection Regulation (GDPR) is the EU's data privacy law that requires websites to get explicit consent from users before collecting their data through cookies.
 
-GDPR is *the reason* we have cookie consent banners today.
+GDPR is _the reason_ we have cookie consent banners today.
 
 This submission by [Cam Blackwood](https://www.tiktok.com/@cameronblackwoodcode/) gets to the core of why cookie consent banners are annoying: they force users to make a decision about something they barely understand (or care about), based on a regulation they probably don't even know exists.
 
 Thanks for the reality check, Cam.
 
-<ReactPlayer 
-  playing 
-  controls 
-  loop
+<video 
+  src="/img/cookie-banner-hackathon/295-camblackwood.mp4" 
+  preload='true'
+  autoPlay
   muted
-  url='/img/cookie-banner-hackathon/295-camblackwood.mp4'
-  height="75%"
-/>
+  controls
+  loop
+  className='video-player'
+></video>
+
 
 ## Windows of Time
 
@@ -44,14 +41,15 @@ Do you ever feel like cookie consent banners are UX design pattern from the past
 
 Disturbing, yet oddly comforting.
 
-<ReactPlayer 
-  playing
+<video 
+  src="/img/cookie-banner-hackathon/300-lezzz-sound.mp4" 
+  preload='true'
+  autoPlay
+  muted
   controls
   loop
-  muted
-  url='/img/cookie-banner-hackathon/300-lezzz-sound.mp4'
-  height="75%"
-/>
+  className='video-player'
+></video>
 
 ## Find all the Cookies
 
@@ -61,14 +59,15 @@ This submission by [Fecony](https://github.com/fecony), Wasp community meme lord
 
 Well played, Fecony.
 
-<ReactPlayer
-  playing
+<video 
+  src="/img/cookie-banner-hackathon/302-fecony-whereda.mp4" 
+  preload='true'
+  autoPlay
+  muted
   controls
   loop
-  muted
-  url='/img/cookie-banner-hackathon/302-fecony-whereda.mp4'
-  height="75%"
-/>
+  className='video-player'
+></video>
 
 ## Fresh Batch of Cookies
 
@@ -76,44 +75,49 @@ Most of us probably just smash the "accept" or "reject" button without even read
 
 And that's a whole lot of cookies.
 
-<ReactPlayer
-  playing
+<video 
+  src="/img/cookie-banner-hackathon/296-henryboyd.mp4" 
+  preload='true'
+  autoPlay
+  muted
   controls
   loop
-  muted
-  url='/img/cookie-banner-hackathon/296-henryboyd.mp4'
-  height="75%"
-/>
+  className='video-player'
+></video>
 
 ## Cookie Management Application Process
 
-What's more annoying than cookie consent banners? Probably job applications. Well [Wardbox], community builder extraordinaire, combines the best (or worst) of both worlds to make the cookie mangament process even more tedious than you could imagine. 
+What's more annoying than cookie consent banners? Probably job applications. Well [Wardbox], community builder extraordinaire, combines the best (or worst) of both worlds to make the cookie mangament process even more tedious than you could imagine.
 
 Now all we have to do is wait for the rejection email.
 
-<ReactPlayer
-  playing
+<video 
+  src="/img/cookie-banner-hackathon/286-wardbox.mp4" 
+  preload='true'
+  autoPlay
+  muted
   controls
   loop
-  muted
-  url='/img/cookie-banner-hackathon/286-wardbox.mp4'
-  height="75%"
-/>
+  className='video-player'
+></video>
 
 ## Grand Prize Winner: Gangnam Style Beat
 
-Our community-chosen winner's submission pretty much speaks for itself. Make sure you turn on the sound for this one.
+Our community-chosen winner's submission pretty much speaks for itself. 
 
-🎤 *Eeeeh, sexy cookie. Op! op-op-op!* 🎵
+Make sure you turn on the sound for this one!
 
-<ReactPlayer
-  playing
+🎤 _Eeeeh, sexy cookie. Op! op-op-op!_ 🎵
+
+<video 
+  src="/img/cookie-banner-hackathon/285-3umaGH-gangnam.mp4" 
+  preload='true'
+  autoPlay
+  muted
   controls
   loop
-  muted
-  url='/img/cookie-banner-hackathon/287-kodera.mp4'
-  height="75%"
-/>
+  className='video-player'
+></video>
 
 ## And there you have it!
 
@@ -121,7 +125,7 @@ Thanks to everyone who participated! We had a lot of fun looking at all the subm
 
 And now for a quick PR announcement:
 
-[Wasp](https://wasp.sh/) team is working hard to build a modern, open-source full-stack React/NodeJS framework.
+At [Wasp](https://wasp.sh/) we're working hard to build a modern, open-source full-stack React/NodeJS framework.
 
 The easiest way to show your support is just to star the Wasp repo! 🐝 It helps us spread the word and motivates us to keep building.
 
@@ -133,4 +137,4 @@ The easiest way to show your support is just to star the Wasp repo! 🐝 It help
   </a>
 </div>
 
-Thanks for reading, and showing your support!
+Thanks for reading, and showing your support!

web/src/css/custom.css

@@ -152,3 +152,16 @@
   height: 100%;
   border: 0;
 }
+
+/* Video player responsive styles */
+.video-player {
+  width: 100%;
+}
+
+/* Desktop styles */
+@media screen and (min-width: 768px) {
+  .video-player {
+    height: 80vh;
+    width: auto;
+  }
+}