Reviews Videos

mail@pastecode.io avatar
unknown
javascript
a year ago
2.9 kB
0
Indexable
Never
<style scoped>
      @media (max-width: 575px) {
        .row-reviews {
          display: flex;
          flex-wrap: wrap;
          margin: 0 -5px;
          text-align: center;
          justify-content: center;
        }
        .rev-col-12 {
          flex-basis: calc(100% - 10px);
          max-width: calc(100% - 10px);
          margin: 0 0px 25px;
        }
        .reviews-video {
          width: 80%;
          border-radius: 10px;
        }
      } /* Styles for screens above 768px */
      @media (min-width: 576px) and (max-width: 767px) {
        .row-reviews {
          display: flex;
          flex-wrap: wrap;
          margin: 0 -5px;
          text-align: center;
          justify-content: center;
        }
        .rev-col-12 {
          flex-basis: calc(50% - 10px);
          max-width: calc(50% - 10px);
          margin: 0 0px 10px;
        }
        .reviews-video {
          width: 80%;
          border-radius: 10px;
        }
      }
      @media (min-width: 768px) {
        .row-reviews {
          display: flex;
          flex-wrap: wrap;
          margin: 0 -20px;
          justify-content: center;
        }
        .rev-col-md-3 {
          text-align: center;
          flex-basis: calc(25% - 40px);
          max-width: calc(25% - 40px);
          margin: 0 0px 20px;
        }
        .reviews-video {
          width: 80%;
          border-radius: 10px;
        }
      }
    </style>

    <div class="row-reviews">
      <div class="rev-col-12 rev-col-md-3">
        <video class="reviews-video" controls>
          <source
            src="https://cdn.shopify.com/videos/c/o/v/a0f1732966fe43fb891b10b86770b399.mp4#t=0.001"
            type="video/mp4"
          />
          Your brow-reviewsser does not support the video tag.
        </video>
      </div>
      <div class="rev-col-12 rev-col-md-3">
        <video class="reviews-video" controls>
          <source
            src="https://cdn.shopify.com/videos/c/o/v/a0f1732966fe43fb891b10b86770b399.mp4#t=0.001"
            type="video/mp4"
          />
          Your brow-reviewsser does not support the video tag.
        </video>
      </div>
      <div class="rev-col-12 rev-col-md-3">
        <video class="reviews-video" controls>
          <source
            src="https://cdn.shopify.com/videos/c/o/v/a0f1732966fe43fb891b10b86770b399.mp4#t=0.001"
            type="video/mp4"
          />
          Your brow-reviewsser does not support the video tag.
        </video>
      </div>
      <div class="rev-col-12 rev-col-md-3">
        <video class="reviews-video" controls>
          <source
            src="https://cdn.shopify.com/videos/c/o/v/a0f1732966fe43fb891b10b86770b399.mp4#t=0.001"
            type="video/mp4"
          />
          Your brow-reviewsser does not support the video tag.
        </video>
      </div>
    </div>