How can I create a video with text section in the Dawn theme?

Store Design

Topic summary

Users are seeking to create a “Video with Text” section in Shopify’s Dawn theme, similar to the existing “Image with Text” section, with autoplay and loop functionality.

Primary Solution:

  • User vincentdh hired a coder and shared complete code for creating video-with-text.liquid and component-video-with-text.css files
  • This involves duplicating the “Image with Text” section structure and replacing image elements with video elements

Common Issues & Fixes:

Mobile Display Problems:

  • Videos not appearing on mobile devices
  • Fix: Add CSS code to base.css making video position relative on screens under 749px

Video Freezing:

  • Videos stop when selecting product variants
  • Solution: Remove specific code from media-gallery.js (line 84) that pauses all media
  • Alternative: Add play/pause buttons for manual control

Additional Improvements:

  • User Spac-es provided enhanced code with play/pause buttons, better mobile animations, and additional customization options (alignment, captions, color schemes)
  • Audio controls can be enabled by adding controls="true" to the video tag

Ongoing Requests:

  • Removing padding/white space around videos
  • Adding colored backgrounds to text sections
  • Making videos full-width
  • Creating video columns without text

The discussion remains active with users requesting help for specific customization needs and styling adjustments.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
112

Hi, I am still not able to see it on mobile mode. Also is there any way to be able to change the color of the background, etc. so it matches the other themes on my site? This is so amazing, I am nearly there! Thank you :slightly_smiling_face:

1 Like