Back to Top

How do I insert a video into my Big Cartel page?

Filed in Creating and customising content

We recommend Vimeo for inserting all video content into web pages. Vimeo offers the highest standard, cleanest and easiest to use tools for uploading and sharing your videos on the web.

Step 1: If you do not already have a Vimeo account, sign up for a Vimeo account for free.

Step 2: Upload your video using Vimeo’s easy to use controls. Refer to Vimeo Basics to help you get started.

Step 3: Once your video has been uploaded, visit your video page in your Vimeo account area and click the Embed link for your video.

Embed Vimeo Video

Vimeo Embed Controls Step 4: You can customise the way your video will embed before copying the embed code.

We recommend the default settings in general, but stress the importance of setting the width – the value outlined in red to the left.

If your video is wider than the page, or area of the page, that you are inserting your video into you must change the width to suit.

Once you change the width, the height of your video will adjust automatically to maintain the correct ratio for your video.

After adjusting your width as required, copy the embed code provided.

Step 5: Paste the embed code into your page content and save your page. This might be the description area for a product, a custom page or an Insert Content (IC) page in your Big Cartel admin area.

For IC options specific to your home page, refer to section Content Options of How do I create a custom home page for my Big Cartel shop?

You should ensure that you paste your code on a new line, i.e.

<iframe src="http://player.vimeo.com/video/19633535?byline=0&amp;portrait=0" width="300" height="225" frameborder="0"></iframe>

…separate from your text or other content.

Step 6: Additionally you can use HTML / CSS to further style your inserted video. For example, to center align the video we would add a wrapping div and use inline styles to set the div width to match the video and set the left/right margins to auto to center the div (and therefore the video):

<div style="margin:0 auto;width:300px;max-width:100%;">
<iframe src="http://player.vimeo.com/video/19633535?byline=0&amp;portrait=0" width="300" height="225" frameborder="0"></iframe>
</div>

Note that we have also set the containing div max-width to 100%. This should be done for all elements that we set a width value for, to ensure the element resizes for responsive layouts on mobile devices.

Additional Reference

Related articles...