Brooklyn theme- Hero Slide - Video as slide item

Highlighted
New Member
1 0 2

Hello all, I know this has been addressed in other themes, however the Brooklyn theme html is a little more complex than simply adding an <li> and embedding a video tag.

Any hints as to how to replace the brooklyn hero slide code with an embedded video?

Any help would be greatly appreciated!

 

Highlighted
New Member
3 0 0

The Brooklyn theme looks to use slick.js. Looking at the docs, it seems to support more than images: http://kenwheeler.github.io/slick/

The slides look like this in the Brooklyn theme - have you tried adding the video embed code to a slide? It might need some styling, though.

<div class="hero__slide">
// slide content goes here
</div>

0 Likes
Highlighted
New Member
3 0 0

The Brooklyn theme looks to use slick.js. Looking at the docs, it seems to support more than images: http://kenwheeler.github.io/slick/

The slides look like this in the Brooklyn theme - have you tried adding the video embed code to a slide? It might need some styling, though.

<div class="hero__slide">
// slide content goes here
</div>

0 Likes
Highlighted
Excursionist
44 0 6

This would be interesting... where would the video be hosted? and how would you remove the frames, start autoplay, cache video,etc.....  i have not seen one theme on shopify so far that has a video spash page... which was all the rage last year, but not sure if relevant anymore.

 

 

Highlighted
New Member
1 0 0

Caveat:  I don't have a full grasp of html/css and I understand to liquid to an even lesser degree.  As such follow the below at your own risk.  You will also need a basic understanding of the file structure used by Shopify.

Problem:  Embed a fullscreen video on the Brooklyn theme, replacing the image.

Solution:

  1. Go to 'Customize Theme' > 'Home Page' and deselect 'Hero Slideshow'
  2. Go to 'Edit HTML/CSS' > 'theme.liquid' and find in the code;
  3. <div class="wrapper">
            {{ content_for_layout }}
          </div>
  4. Replace it with:

 

{% if template contains 'index' %}
      <div class="wrapperhome">
        {{ content_for_layout }}
      </div>
      {% else %}
      <div class="wrapper">
        {{ content_for_layout }}
      </div>
      {% endif %}

 

 

 

 

0 Likes
Highlighted
New Member
2 0 0

Base Brooklyn design with background video http://openshopify.com/startup-shopify-landing-page/

0 Likes
Highlighted
Shopify Partner
97 0 8

We launch Brooklyn theme with background video ,Check this Shopify theme, http://mystartup-2.myshopify.com/

Shopify Expert/ Shopify Support
Highlighted
New Member
5 0 0

At this time we are using the Video background app.  Working great so far.

https://apps.shopify.com/video-background

0 Likes
Highlighted
New Member
1 0 0

How did you this? This is exactly what I wanted for my website.

Please advise.

Thank you.

0 Likes
Highlighted
Shopify Partner
97 0 8

Update your email address

Shopify Expert/ Shopify Support
0 Likes