Dawn: How to make videos in blog posts full-width?

[ArtMag]

Hi there,

We switched to using Dawn recently. With our previous theme, YouTube or Vimeo videos in blog posts were the full column width when viewed on the website, but now they are only about 80% of the width:

Is there a way to make them full width by default in the theme editor?

[made4Uo · Accepted solution]

Hi @ArtMag ,

Videos were added using iframe. Go to your Code editor. Go to Themes > Actions > Edit code. Find the Asset folder and open the base.css. Then add the code below. 

NOTE: This will adjust all your iframe videos matching the width of the section.

iframe {
width: 100% !important;
}

If this helped you, please select as a solution. Thank you

[ArtMag]

Worked perfectly, thank you so much, and I love your YouTube videos and website for all the Shopify tips and tricks you share! 💜

[made4Uo]

Hi @ArtMag ,

Thank you

[James431]

To make videos in blog posts full-width, follow these steps:

Identify the video element in your blog post. This can be a YouTube or Vimeo embed code or a self-hosted video file.Wrap the video element in a container with a class name. For example, you can use a <div> element with a class name "video-container".Apply CSS to the container to make the video full-width. Here's an example:

.video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; } .video-container iframe, .video-container video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

This CSS uses the "padding-bottom" trick to make the video responsive and full-width. The padding-bottom value is set to 56.25%, which is the aspect ratio of a 16:9 video. You can adjust this value based on the aspect ratio of your video.

Save the changes to your blog post and preview the page to ensure the video is now full-width.

[shanzyleon96]

To make videos in blog posts full-width in Shopify, you can follow these steps:

1. Log in to your Shopify admin panel.
2. Navigate to "Online Store" and click on "Blog Posts."
3. Select the blog post where you want to add a full-width video or create a new blog post.
4. In the blog post editor, click on the "+" button to add a new content section or locate the existing content section where you want to insert the video.
5. Choose the "Video" content block or the equivalent option provided by your theme.
6. Depending on your theme, you may have different options to add a video. You can either insert the video URL or embed code directly, or you may have an option to select a video from your media library.
7. Insert the URL or embed code of the video you want to add. Make sure the video is hosted on a supported platform (such as YouTube or Vimeo).
8. If your theme provides customization options for the video block, adjust the settings as needed. Look for an option to set the video width to "full-width" or a similar option.
9. Save the changes to the blog post.
10. Preview the blog post or view it live on your website to ensure that the video appears full-width.

Note: The exact steps and options may vary depending on your Shopify theme. If your theme does not provide a built-in full-width video option, you may need to customize your theme's code or consider using a Shopify app or plugin specifically designed for full-width video integration.

Remember to always preview and test your changes across different devices and screen sizes to ensure the video displays properly and maintains responsiveness.