CODEWITHSUNDEEP
bigcartel
Mathew Yoo
Mathew Yoo

Reputation: 1

Big Cartel Mobile Video View

I added a video to my website but when I view the video on mobile devices it is too big for the screen. Is there any way so that I can make the video fit the mobile screen? Or just make the website more mobile appropriate in general? My Website: http://notsomefantasy.bigcartel.com/

Upvotes: 0

Views: 292

Answers (1)

Nick Endle
Nick Endle

Reputation: 945

Add this to your store's custom CSS:

.vid-container {
  height: 0; 
  overflow: hidden;
  padding-bottom: 50%;
  padding-top: 35px;
  position: relative;
}

.vid-container iframe,
.vid-container object,
.vid-container embed {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

Then use the following code on your Home page - making sure to replace the {{ EMBED CODE ID }} with what YouTube gives you.

<div class="vid-container">
  <iframe width="854" height="480" src="https://www.youtube.com/embed/{{EMBED CODE ID}}" frameborder="0" allowfullscreen=""></iframe>
</div>

Upvotes: 0

Related Questions