How to have buttons appear on the screen?

by

How to have buttons appear on the screen?

Contents hide
1 How to have buttons appear on the screen?
2 Solution – 1

Problem Description:

In the code I want all the squares to be a single color.

Allowing me to still change the colors of individual squares if I want to.

But after I did that, the buttons disappeared from the screen.

To be able to have all the squares/boxes be a different color.

I used this: https://jsfiddle.net/kwqh6zdn/

Doing so has the effect of hiding all the buttons though.

 .channel-browser__channel-grid-item::after {
  content: "";  
  position: absolute;
  inset: 0;
  background-color: pink;
}

How would this be fixed in the code so that, I am able to have all the squares be a certain color, while also being able to see the play buttons on the screen?

  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>

 .channel-browser__channel-grid-item::after {
  content: "";  
  position: absolute;
  inset: 0;
  background-color: pink;
}
 
.cover {
  -webkit-appearance: none;
  appearance: none;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  cursor: pointer;
  border: 9px solid blue;
  background: transparent;
  filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.7));
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

.cover::before {
  content: "";
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
 border-left: 27px solid blue;
  transform: translateX(4px);
}

.channel-browser__channel-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
 
}

.channel-browser__channel-grid-item {
  position: relative;
}

.content-item-container--aspect-square .horizontal-content-browser__content-item {
  padding-top: 100%;
}

.horizontal-content-browser__content-item .horizontal-content-browser__fallback-image,
.horizontal-content-browser__content-item .responsive-image-component {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  border-radius: 4px;
  background-color: #1a1a1a;
  -webkit-box-shadow: 0 2px 3px 0 rgb(0 0 0 / 20%);
  box-shadow: 0 2px 3px 0 rgb(0 0 0 / 20%);
}

.box-color-red::after {
  background: red;
  border-radius: 4px;
}

.box-color-blue {
  background: blue;
}

.box-color-yellow {
  background: yellow;
}

.box-color-green {
  background: green;
}
<div class="playButtonContainer with-curtain channel-browser__channels channel-browser__channel-grid content-item-container content-item-container--aspect-square">
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible box-color-red">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle2 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
</div>

Solution – 1

This can be achieved with the addition of:

.channel-browser__channel-grid-item::after {
  z-index: -1;
}

Though if we’re manipulating layers then it’s often useful to style the parent with:

.channel-browser__channel-grid-item::after {
  isolation: isolate;
}

This is in order to prevent layers "leaking" out of the parent element and interfering with other contents and their z-index specified layers:

/* styling the parent of the pseudo-element in order to have each
   element be its own stacking context, and to isolate the various
   layers within that element: */
.channel-browser__channel-grid-item {
  isolation: isolate;
}

.channel-browser__channel-grid-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: pink;
  /* positioning the pseudo-element behind the content of
     its parent element: */
  z-index: -1;
}

.cover {
  -webkit-appearance: none;
  appearance: none;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  cursor: pointer;
  border: 9px solid blue;
  background: transparent;
  filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.7));
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

.cover::before {
  content: "";
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 27px solid blue;
  transform: translateX(4px);
}

.channel-browser__channel-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

.channel-browser__channel-grid-item {
  position: relative;
}

.content-item-container--aspect-square .horizontal-content-browser__content-item {
  padding-top: 100%;
}

.horizontal-content-browser__content-item .horizontal-content-browser__fallback-image,
.horizontal-content-browser__content-item .responsive-image-component {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  border-radius: 4px;
  background-color: #1a1a1a;
  -webkit-box-shadow: 0 2px 3px 0 rgb(0 0 0 / 20%);
  box-shadow: 0 2px 3px 0 rgb(0 0 0 / 20%);
}

.box-color-red::after {
  background: red;
  border-radius: 4px;
}

.box-color-blue {
  background: blue;
}

.box-color-yellow {
  background: yellow;
}

.box-color-green {
  background: green;
}
<div class="playButtonContainer with-curtain channel-browser__channels channel-browser__channel-grid content-item-container content-item-container--aspect-square">
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible box-color-red">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle2 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
  <div class="horizontal-content-browser__content-item content-item channel-browser__channel-grid-item content-item--channel visible">
    <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  </div>
</div>

JS Fiddle demo.

References:

Rate this post
We use cookies in order to give you the best possible experience on our website. By continuing to use this site, you agree to our use of cookies.
Accept
Reject
Read More…