cloudinary-video-player 2.0.2-edge.2 → 2.0.2

package/dist/cld-video-player.css

@@ -502,6 +502,9 @@
 .cld-video-player .vjs-text-track-display > div {
   margin: 3% !important;
 }
+.cld-video-player .vjs-text-track-display.cld-paced-text-tracks b {
+  color: var(--color-accent);
+}
 .cld-video-player .vjs-text-track-cue {
   top: auto !important;
   bottom: 3.4rem !important;
@@ -1091,5 +1094,1163 @@
 .cld-video-player .vjs-http-source-selector > .vjs-button > .vjs-icon-placeholder:before {
   content: "\f114";
 }
+/*!************************************************************************************************************************************************************!*\
+  !*** css ../node_modules/css-loader/dist/cjs.js!../node_modules/sass-loader/dist/cjs.js!./components/recommendations-overlay/recommendations-overlay.scss ***!
+  \************************************************************************************************************************************************************/
+.vjs-recommendations-overlay {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  visibility: hidden;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+.vjs-recommendations-overlay .vjs-recommendations-overlay-hide {
+  font-size: 1em;
+  cursor: pointer;
+  position: absolute;
+  display: inline-block;
+  top: 3.75%;
+  right: 1.72%;
+}
+.vjs-recommendations-overlay .vjs-recommendations-overlay-content {
+  position: relative;
+  width: 85%;
+}
+.vjs-recommendations-overlay .vjs-recommendations-overlay-content:before {
+  display: block;
+  content: "";
+  width: 100%;
+  padding-top: 56.25%;
+}
+.vjs-recommendations-overlay .vjs-recommendations-overlay-content > .aspect-ratio-content {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+.vjs-recommendations-overlay .vjs-recommendations-overlay-content .aspect-ratio-content {
+  display: flex;
+  flex-flow: column;
+  height: auto;
+}
+.vjs-recommendations-overlay .vjs-recommendations-overlay-content .aspect-ratio-content .vjs-recommendations-overlay-item {
+  border: 1px solid rgba(255, 255, 255, 0.5);
+}
+.vjs-recommendations-overlay .vjs-recommendations-overlay-content .aspect-ratio-content .vjs-recommendations-overlay-item-primary {
+  flex: 1.82;
+  display: flex;
+  flex-flow: row;
+}
+.vjs-recommendations-overlay .vjs-recommendations-overlay-content .aspect-ratio-content .vjs-recommendations-overlay-item-primary .vjs-recommendations-overlay-item-primary-image {
+  flex: 1;
+  background-size: cover;
+}
+.vjs-recommendations-overlay .vjs-recommendations-overlay-content .aspect-ratio-content .vjs-recommendations-overlay-item-primary .vjs-recommendations-overlay-item-primary-content {
+  flex: 0.5625;
+  display: flex;
+  flex-flow: column;
+  background: rgba(0, 0, 0, 0.6);
+  text-align: left;
+  padding: 3%;
+  min-width: 0;
+}
+.vjs-recommendations-overlay .vjs-recommendations-overlay-content .aspect-ratio-content .vjs-recommendations-overlay-item-primary .vjs-recommendations-overlay-item-primary-content h2 {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding: 0 0 0 0;
+  font-size: 18px;
+  margin: 0 0 1em 0;
+  font-weight: 600;
+}
+.vjs-recommendations-overlay .vjs-recommendations-overlay-content .aspect-ratio-content .vjs-recommendations-overlay-item-primary .vjs-recommendations-overlay-item-primary-content h3 {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding: 0 0 0 0;
+  font-size: 20px;
+  margin: 0 0 1.3em 0;
+  font-weight: 500;
+}
+.vjs-recommendations-overlay .vjs-recommendations-overlay-content .aspect-ratio-content .vjs-recommendations-overlay-item-primary .vjs-recommendations-overlay-item-primary-content p {
+  padding: 0 0 0 0;
+  margin: 0 0 0 0;
+  font-size: 14px;
+  overflow: hidden;
+  line-height: 1.4em;
+  font-weight: 400;
+}
+@media only screen and (max-width: 1050px) {
+  .vjs-recommendations-overlay .vjs-recommendations-overlay-content .aspect-ratio-content .vjs-recommendations-overlay-item-primary .vjs-recommendations-overlay-item-primary-content h2 {
+    font-size: 16px;
+  }
+  .vjs-recommendations-overlay .vjs-recommendations-overlay-content .aspect-ratio-content .vjs-recommendations-overlay-item-primary .vjs-recommendations-overlay-item-primary-content h3 {
+    font-size: 18px;
+  }
+  .vjs-recommendations-overlay .vjs-recommendations-overlay-content .aspect-ratio-content .vjs-recommendations-overlay-item-primary .vjs-recommendations-overlay-item-primary-content p {
+    font-size: 12px;
+  }
+}
+@media only screen and (max-width: 900px) {
+  .vjs-recommendations-overlay .vjs-recommendations-overlay-content .aspect-ratio-content .vjs-recommendations-overlay-item-primary .vjs-recommendations-overlay-item-primary-content p {
+    font-size: 10px;
+  }
+}
+@media only screen and (max-width: 768px) {
+  .vjs-recommendations-overlay .vjs-recommendations-overlay-content .aspect-ratio-content .vjs-recommendations-overlay-item-primary .vjs-recommendations-overlay-item-primary-content p {
+    display: none;
+  }
+}
+.vjs-recommendations-overlay .vjs-recommendations-overlay-content .aspect-ratio-content .vjs-recommendations-overlay-item-secondary-container {
+  flex: 1;
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: flex-start;
+}
+.vjs-recommendations-overlay .vjs-recommendations-overlay-content .aspect-ratio-content .vjs-recommendations-overlay-item-secondary-container .vjs-recommendations-overlay-item-secondary {
+  background-size: 100% 100%;
+  flex: 1;
+  max-width: 33%;
+  font-size: 1.16em;
+  position: relative;
+  margin: 2% 2% 0 0;
+}
+.vjs-recommendations-overlay .vjs-recommendations-overlay-content .aspect-ratio-content .vjs-recommendations-overlay-item-secondary-container .vjs-recommendations-overlay-item-secondary:last-child {
+  margin-right: 0;
+}
+.vjs-recommendations-overlay .vjs-recommendations-overlay-content .aspect-ratio-content .vjs-recommendations-overlay-item-secondary-container .vjs-recommendations-overlay-item-secondary div {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  text-align: left;
+  line-height: normal;
+  position: absolute;
+  width: 100%;
+  bottom: 0;
+  left: 0;
+  padding: 20% 7% 4.5% 7%;
+}
+.cld-video-player-skin-light .vjs-recommendations-overlay .vjs-recommendations-overlay-content .aspect-ratio-content .vjs-recommendations-overlay-item-secondary-container .vjs-recommendations-overlay-item-secondary div {
+  padding: 5% 7%;
+}
+.cld-video-player-skin-dark .vjs-recommendations-overlay .vjs-recommendations-overlay-content .aspect-ratio-content .vjs-recommendations-overlay-item-secondary-container .vjs-recommendations-overlay-item-secondary div.vjs-recommendations-overlay-item-info {
+  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
+}
+.vjs-recommendations-overlay .vjs-recommendations-overlay-content .aspect-ratio-content .vjs-recommendations-overlay-item-secondary-container .vjs-recommendations-overlay-item-secondary div span {
+  display: block;
+  min-width: 0;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.vjs-recommendations-overlay .vjs-recommendations-overlay-content .aspect-ratio-content .vjs-recommendations-overlay-item-secondary-container .vjs-recommendations-overlay-item-secondary div span.vjs-recommendations-overlay-item-secondary-title {
+  flex: 2.3;
+  font-size: 13px;
+}
+.vjs-recommendations-overlay .vjs-recommendations-overlay-content .aspect-ratio-content .vjs-recommendations-overlay-item-secondary-container .vjs-recommendations-overlay-item-secondary div span.vjs-recommendations-overlay-item-secondary-duration {
+  text-align: right;
+  margin-left: 10px;
+}
+/*!***************************************************************************************************************************!*\
+  !*** css ../node_modules/css-loader/dist/cjs.js!../node_modules/sass-loader/dist/cjs.js!./plugins/chapters/chapters.scss ***!
+  \***************************************************************************************************************************/
+@charset "UTF-8";
+.cld-video-player .vjs-control-bar-chapter-wrapper {
+  display: flex;
+  align-items: center;
+  container-type: inline-size;
+}
+.cld-video-player .vjs-control-bar-chapter-display {
+  line-height: 1.5;
+  font-size: 90%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding: 0 0.5em;
+}
+.cld-video-player .vjs-control-bar-chapter-display:not(:empty)::before {
+  content: "•";
+  padding-right: 0.5em;
+}
+@container (max-width: 150px) {
+  .cld-video-player .vjs-control-bar-chapter-display {
+    display: none;
+  }
+}
+.cld-video-player .vjs-chapter-marker {
+  pointer-events: none;
+  position: absolute;
+  background: var(--color-base);
+  width: 4px;
+  top: 0;
+  bottom: 0;
+  opacity: 0.5;
+  z-index: 1;
+}
+.cld-video-player .vjs-chapter-display {
+  pointer-events: none;
+  line-height: 1.5;
+  font-size: 90%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  transform: translateX(-50%);
+  bottom: 2.7em;
+  position: absolute;
+  text-shadow: 0 0 4px color-mix(in srgb, var(--color-base) 40%, transparent);
+}
+.cld-video-player .vjs-chapter-display:not(:empty) ~ .vjs-vtt-thumbnail-display {
+  bottom: 4em;
+}
+.cld-video-player .vjs-time-tooltip {
+  right: auto !important;
+  translate: -50%;
+}
+/*!********************************************************************************************************************************************!*\
+  !*** css ../node_modules/css-loader/dist/cjs.js!../node_modules/sass-loader/dist/cjs.js!../node_modules/videojs-ima/dist/videojs.ima.scss ***!
+  \********************************************************************************************************************************************/
+/**
+ * Copyright 2014 Google Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.ima-ad-container {
+  top: 0em;
+  position: absolute;
+  display: none;
+  width: 100%;
+  height: 100%;
+}
+
+/* Move overlay if user fast-clicks play button. */
+.video-js.vjs-playing .bumpable-ima-ad-container {
+  margin-top: -4em;
+}
+
+/* Move overlay when controls are active. */
+.video-js.vjs-user-inactive.vjs-playing .bumpable-ima-ad-container {
+  margin-top: 0em;
+}
+
+.video-js.vjs-paused .bumpable-ima-ad-container,
+.video-js.vjs-playing:hover .bumpable-ima-ad-container,
+.video-js.vjs-user-active.vjs-playing .bumpable-ima-ad-container {
+  margin-top: -4em;
+}
+
+.ima-controls-div {
+  bottom: 0em;
+  height: 1.4em;
+  position: absolute;
+  overflow: hidden;
+  display: none;
+  opacity: 1;
+  background-color: rgba(7, 20, 30, 0.7);
+  background: -moz-linear-gradient(bottom, rgba(7, 20, 30, 0.7) 0%, rgba(7, 20, 30, 0) 100%); /* FF3.6+ */
+  background: -webkit-gradient(linear, left bottom, left top, color-stop(0%, rgba(7, 20, 30, 0.7)), color-stop(100%, rgba(7, 20, 30, 0))); /* Chrome,Safari4+ */
+  background: -webkit-linear-gradient(bottom, rgba(7, 20, 30, 0.7) 0%, rgba(7, 20, 30, 0) 100%); /* Chrome10+,Safari5.1+ */
+  background: -o-linear-gradient(bottom, rgba(7, 20, 30, 0.7) 0%, rgba(7, 20, 30, 0) 100%); /* Opera 11.10+ */
+  background: -ms-linear-gradient(bottom, rgba(7, 20, 30, 0.7) 0%, rgba(7, 20, 30, 0) 100%); /* IE10+ */
+  background: linear-gradient(to top, rgba(7, 20, 30, 0.7) 0%, rgba(7, 20, 30, 0) 100%); /* W3C */
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#0007141E", endColorstr="#07141E",GradientType=0 ); /* IE6-9 */
+}
+
+.ima-controls-div.ima-controls-div-showing {
+  height: 3.7em;
+}
+
+.ima-countdown-div {
+  height: 1em;
+  color: #FFFFFF;
+  text-shadow: 0 0 0.2em #000;
+  cursor: default;
+}
+
+.ima-seek-bar-div {
+  top: 1.2em;
+  height: 0.3em;
+  position: absolute;
+  background: rgba(255, 255, 255, 0.4);
+}
+
+.ima-progress-div {
+  width: 0em;
+  height: 0.3em;
+  background-color: #ECC546;
+}
+
+.ima-play-pause-div, .ima-mute-div, .ima-slider-div, .ima-fullscreen-div {
+  width: 2.33em;
+  height: 1.33em;
+  top: 0.733em;
+  left: 0em;
+  position: absolute;
+  color: #CCCCCC;
+  font-size: 1.5em;
+  line-height: 2;
+  text-align: center;
+  font-family: VideoJS;
+  cursor: pointer;
+}
+
+.ima-mute-div {
+  left: auto;
+  right: 5.667em;
+}
+
+.ima-slider-div {
+  left: auto;
+  right: 2.33em;
+  width: 3.33em;
+  height: 0.667em;
+  top: 1.33em;
+  background-color: #555555;
+}
+
+.ima-slider-level-div {
+  width: 100%;
+  height: 0.667em;
+  background-color: #ECC546;
+}
+
+.ima-fullscreen-div {
+  left: auto;
+  right: 0em;
+}
+
+.ima-playing:before {
+  content: "\f103";
+}
+
+.ima-paused:before {
+  content: "\f101";
+}
+
+.ima-playing:hover:before, .ima-paused:hover:before {
+  text-shadow: 0 0 1em #fff;
+}
+
+.ima-non-muted:before {
+  content: "\f107";
+}
+
+.ima-muted:before {
+  content: "\f104";
+}
+
+.ima-non-muted:hover:before, .ima-muted:hover:before {
+  text-shadow: 0 0 1em #fff;
+}
+
+.ima-non-fullscreen:before {
+  content: "\f108";
+}
+
+.ima-fullscreen:before {
+  content: "\f109";
+}
+
+.ima-non-fullscreen:hover:before, .ima-fullscreen:hover:before {
+  text-shadow: 0 0 1em #fff;
+}
+/*!*******************************************************************************************************************************************************!*\
+  !*** css ../node_modules/css-loader/dist/cjs.js!../node_modules/sass-loader/dist/cjs.js!./plugins/playlist/ui/components/upcoming-video-overlay.scss ***!
+  \*******************************************************************************************************************************************************/
+.vjs-upcoming-video {
+  opacity: 0;
+  transition: bottom 0.1s, visibility 0.2s, opacity 0.2s;
+  visibility: hidden;
+  position: absolute;
+  bottom: 4.5em;
+  right: 0.75em;
+  width: 38.7%;
+  max-width: 30em;
+  border: 1px solid #E8E8E9;
+}
+.vjs-upcoming-video .upcoming-video-overlay {
+  aspect-ratio: 16/9;
+  background-size: cover;
+  cursor: pointer;
+}
+.vjs-upcoming-video .upcoming-video-overlay .vjs-upcoming-video-bar {
+  display: flex;
+  flex: auto;
+  justify-content: space-between;
+  position: absolute;
+  height: 3em;
+  line-height: 3em;
+  width: 100%;
+  bottom: 0px;
+}
+.vjs-upcoming-video .upcoming-video-overlay .vjs-upcoming-video-bar .vjs-upcoming-video-title {
+  flex: auto;
+  text-align: left;
+  display: block;
+  width: auto;
+  max-width: 80%;
+  padding-left: 1em;
+  padding-right: 1em;
+}
+.vjs-upcoming-video .upcoming-video-overlay .vjs-upcoming-video-bar .vjs-upcoming-video-title .vjs-upcoming-video-title-display {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.vjs-upcoming-video .upcoming-video-overlay .vjs-upcoming-video-bar .vjs-upcoming-video-title .vjs-upcoming-video-title-display .vjs-upcoming-video-title-display-label {
+  font-weight: 400;
+}
+.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-upcoming-video {
+  transition: bottom 1s, visibility 0.2s, opacity 0.2s;
+  bottom: 0.7em;
+}
+.vjs-upcoming-video.vjs-upcoming-video-show {
+  transition: visibility 0.2s, opacity 0.2s;
+  opacity: 1;
+  visibility: visible;
+}
+.vjs-upcoming-video.disable-transition {
+  transition: visibility 0s;
+}
+@media only screen and (max-width: 768px) {
+  .vjs-upcoming-video:before {
+    display: none;
+  }
+  .cld-video-player.cld-video-player-skin-dark .vjs-upcoming-video, .cld-video-player.cld-video-player-skin-light .vjs-upcoming-video {
+    border: none;
+  }
+  .vjs-upcoming-video .aspect-ratio-content {
+    background-image: none !important;
+  }
+}
+/*!*************************************************************************************************************************************************!*\
+  !*** css ../node_modules/css-loader/dist/cjs.js!../node_modules/sass-loader/dist/cjs.js!./plugins/playlist/ui/components/playlist-buttons.scss ***!
+  \*************************************************************************************************************************************************/
+.cld-video-player .vjs-playlist-button {
+  display: none;
+}
+.cld-video-player.vjs-playlist .vjs-playlist-button {
+  display: block;
+}
+/*!******************************************************************************************************************************!*\
+  !*** css ../node_modules/css-loader/dist/cjs.js!../node_modules/sass-loader/dist/cjs.js!./plugins/playlist/ui/playlist.scss ***!
+  \******************************************************************************************************************************/
+.cld-plw-horizontal .cld-plw-col-list {
+  padding-top: 14.0625%;
+  position: relative;
+}
+.cld-plw-horizontal .cld-plw-panel {
+  overflow: auto;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  display: flex;
+  flex-direction: row;
+}
+.cld-plw-horizontal .cld-plw-panel-item {
+  background-image: none;
+  min-width: 25%;
+  max-width: 25%;
+}
+.cld-plw-horizontal .cld-plw-panel-item:first-child {
+  margin-left: 0;
+}
+.cld-plw-horizontal .cld-plw-panel-item:last-child {
+  margin-right: 0;
+}
+
+.cld-plw-vertical {
+  display: flex;
+  flex-direction: row;
+}
+.cld-plw-vertical.cld-plw-layout > div:first-child {
+  flex: 1;
+}
+.cld-plw-vertical .cld-plw-col-list {
+  display: flex;
+  flex-direction: column;
+  min-width: 20%;
+}
+.cld-plw-vertical .cld-plw-panel {
+  height: 100%;
+  overflow: auto;
+}
+.cld-plw-vertical .cld-plw-panel-item {
+  height: 25%;
+}
+.cld-plw-vertical .cld-plw-panel-item:last-child {
+  margin-bottom: 0;
+}
+
+.cld-plw-item-title-next {
+  font-weight: bold;
+}
+
+.cld-plw-item-info-wrap {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  padding: 5% 7%;
+  width: 100%;
+  transition: color 0.25s;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  box-sizing: border-box;
+}
+.cld-video-player-skin-dark .cld-plw-item-info-wrap {
+  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
+}
+@media only screen and (max-width: 768px) {
+  .cld-video-player-skin-dark .cld-plw-item-info-wrap {
+    background: var(--color-base);
+  }
+}
+
+.cld-plw-item-title {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.cld-plw-item-duration {
+  margin-left: 10px;
+}
+
+/*  Default Playlist Layout */
+.cld-plw-layout.cld-plw-layout-fluid {
+  width: 100%;
+}
+.cld-plw-layout.cld-plw-vertical {
+  flex-direction: row;
+}
+.cld-plw-layout.cld-plw-horizontal {
+  flex-direction: column;
+}
+
+.cld-plw-custom {
+  padding: 4px;
+}
+.cld-plw-custom .cld-plw-panel-item {
+  background: none !important;
+  margin: 4px 0;
+}
+.cld-plw-custom .cld-plw-panel-item:first-child {
+  margin-top: 0;
+}
+.cld-plw-custom .cld-plw-panel-item:last-child {
+  margin-bottom: 0;
+}
+.cld-plw-custom .cld-plw-panel-item img {
+  display: block;
+  width: 150px;
+}
+.cld-plw-custom .cld-plw-panel-item .cld-plw-item-info-wrap {
+  left: 160px;
+}
+.cld-plw-custom .cld-plw-panel-item .cld-plw-item-title-next {
+  display: block;
+}
+
+@media only screen and (max-width: 768px) {
+  .cld-plw-layout.cld-plw-vertical, .cld-plw-layout.cld-plw-horizontal {
+    flex-direction: column;
+  }
+  .cld-plw-layout.cld-plw-vertical .cld-plw-panel, .cld-plw-layout.cld-plw-horizontal .cld-plw-panel {
+    flex-direction: column;
+  }
+  .cld-plw-layout.cld-plw-vertical .cld-plw-col-list, .cld-plw-layout.cld-plw-horizontal .cld-plw-col-list {
+    width: inherit !important;
+    height: inherit !important;
+    max-height: 340px;
+  }
+  .cld-plw-layout.cld-plw-vertical .cld-plw-panel-item, .cld-plw-layout.cld-plw-horizontal .cld-plw-panel-item {
+    background: none !important;
+  }
+  .cld-plw-layout.cld-plw-vertical .cld-plw-panel-item img, .cld-plw-layout.cld-plw-horizontal .cld-plw-panel-item img {
+    display: block;
+    width: 150px;
+    height: 84px;
+  }
+  .cld-plw-layout.cld-plw-vertical .cld-plw-panel-item .cld-plw-item-info-wrap, .cld-plw-layout.cld-plw-horizontal .cld-plw-panel-item .cld-plw-item-info-wrap {
+    left: 150px;
+    padding: 15px 10px;
+    top: 0;
+    right: 0;
+    width: auto;
+  }
+  .cld-plw-layout.cld-plw-vertical .cld-plw-panel-item .cld-plw-item-title-next, .cld-plw-layout.cld-plw-horizontal .cld-plw-panel-item .cld-plw-item-title-next {
+    display: block;
+  }
+  .cld-plw-layout.cld-plw-vertical .cld-plw-panel-item .cld-plw-item-title-curr, .cld-plw-layout.cld-plw-horizontal .cld-plw-panel-item .cld-plw-item-title-curr {
+    display: block;
+  }
+  .cld-plw-layout.cld-plw-vertical .cld-plw-panel-item .cld-plw-item-title, .cld-plw-layout.cld-plw-horizontal .cld-plw-panel-item .cld-plw-item-title {
+    white-space: normal;
+  }
+  .cld-plw-layout.cld-plw-horizontal .cld-plw-col-list {
+    padding-top: 0;
+    overflow: auto;
+  }
+  .cld-plw-layout.cld-plw-horizontal .cld-plw-panel {
+    position: initial;
+  }
+  .cld-plw-layout.cld-plw-horizontal .cld-plw-panel-item {
+    max-width: none;
+  }
+}
+/*!*****************************************************************************************************************************************!*\
+  !*** css ../node_modules/css-loader/dist/cjs.js!../node_modules/sass-loader/dist/cjs.js!./plugins/playlist/ui/thumbnail/thumbnail.scss ***!
+  \*****************************************************************************************************************************************/
+.cld-thumbnail {
+  position: relative;
+  display: block;
+  width: 100%;
+  overflow: hidden;
+  font-size: 1em;
+  text-align: left;
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+}
+.cld-thumbnail .cld-thumbnail-img {
+  display: none;
+}
+.cld-thumbnail:before {
+  content: "";
+  position: absolute;
+  top: 40%;
+  max-height: 60%;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: linear-gradient(to top, var(--color-base), transparent 80%);
+  opacity: 0.6;
+}
+.cld-thumbnail.cld-plw-panel-item-active {
+  border: 1px solid var(--color-accent);
+  box-sizing: border-box;
+}
+.cld-thumbnail.cld-plw-panel-item-active .cld-plw-item-info-wrap {
+  color: var(--color-accent);
+}
+
+.cld-plw-panel-item:hover:after {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0px;
+  left: 0px;
+  background-color: var(--color-text);
+  opacity: 0.2;
+}
+
+@media only screen and (max-width: 768px) {
+  .cld-thumbnail:before {
+    background: none;
+  }
+}
+/*!*******************************************************************************************************************************************!*\
+  !*** css ../node_modules/css-loader/dist/cjs.js!../node_modules/sass-loader/dist/cjs.js!./components/shoppable-bar/shoppable-widget.scss ***!
+  \*******************************************************************************************************************************************/
+.cld-spbl-bar {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  pointer-events: none;
+  overflow: hidden;
+  z-index: 1;
+}
+
+.cld-spbl-bar-inner {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  transform: translateX(20%);
+  transition: transform 0.3s;
+}
+
+.cld-video-player .vjs-control-bar {
+  transition: width 0.3s;
+}
+
+.shoppable-panel-visible .cld-spbl-bar-inner {
+  transform: translateX(0);
+}
+.shoppable-panel-visible .vjs-control-bar {
+  width: 80%;
+}
+.shoppable-panel-visible .cld-spbl-toggle-icon:before {
+  content: "\f119";
+}
+
+.cld-spbl-banner-msg {
+  position: absolute;
+  font-size: 2em;
+  text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
+  left: 0;
+  top: calc(50% + 3em);
+  width: 100%;
+  text-align: center;
+}
+.cld-video-player.vjs-has-started .cld-spbl-banner-msg, .cld-video-player.vjs-error .cld-spbl-banner-msg {
+  display: none;
+}
+
+.cld-spbl-toggle {
+  position: absolute;
+  top: 3%;
+  right: 20%;
+  color: inherit;
+  border-radius: 6px 0 0 6px;
+  width: 40px;
+  height: 40px;
+  line-height: 40px;
+  font-size: 24px;
+  text-align: center;
+  cursor: pointer;
+  pointer-events: all;
+  text-decoration: none;
+}
+.cld-spbl-toggle:hover {
+  color: inherit;
+  text-decoration: none;
+}
+.cld-spbl-toggle:focus {
+  outline: none;
+}
+
+.cld-spbl-toggle-icon {
+  display: block;
+  animation-duration: 1s;
+  animation-fill-mode: both;
+}
+.cld-spbl-toggle-icon.cld-spbl-toggle-custom-icon {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 75%;
+}
+.shoppable-panel-hidden .cld-spbl-toggle-icon.cld-spbl-toggle-custom-icon:before {
+  display: none;
+}
+.shoppable-panel-visible .cld-spbl-toggle-icon.cld-spbl-toggle-custom-icon {
+  background-image: none !important;
+}
+.cld-spbl-toggle-icon.animate, .shoppable-panel-hidden .cld-spbl-toggle-icon:hover {
+  animation-name: tada;
+  animation-iteration-count: infinite;
+}
+
+.cld-spbl-panel {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 20%;
+  overflow: auto;
+  pointer-events: all;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+.cld-spbl-panel::-webkit-scrollbar {
+  display: none;
+}
+
+.cld-spbl-item {
+  display: block;
+  position: relative;
+  margin: 12px 8px;
+  color: inherit;
+  transform: scale(0.98);
+  transition: transform 0.3s;
+}
+.cld-spbl-bar[size=md] .cld-spbl-item {
+  font-size: 10px;
+}
+.cld-spbl-bar[size=sm] .cld-spbl-item {
+  font-size: 8px;
+}
+.cld-spbl-item:before, .cld-spbl-item:after {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 0;
+  pointer-events: none;
+  box-shadow: 0 0 0;
+  transition: box-shadow 0.3s;
+  border-radius: 3px;
+}
+.cld-spbl-item.active {
+  transform: scale(1);
+}
+.cld-spbl-item.active:before {
+  opacity: 0.5;
+  box-shadow: 0 0 0 4px;
+}
+.cld-spbl-item.active:after {
+  box-shadow: 0 0 0 2px;
+}
+.cld-spbl-item:hover {
+  color: inherit;
+}
+
+.cld-spbl-img {
+  max-width: 100%;
+  height: auto;
+}
+
+.cld-spbl-hover-img {
+  display: none;
+}
+
+.cld-spbl-item-info {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  max-height: 100%;
+  overflow: hidden;
+  padding: 6%;
+}
+
+.cld-spbl-overlay {
+  display: inline-flex;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  line-height: 1.3;
+  font-size: 120%;
+  text-align: center;
+  padding: 10%;
+  z-index: 1;
+  opacity: 0;
+}
+.cld-spbl-overlay .cld-spbl-overlay-text {
+  margin: auto;
+}
+
+.cld-spbl-item:hover .cld-spbl-overlay {
+  opacity: 1;
+}
+.cld-spbl-item:hover .cld-spbl-overlay ~ .cld-spbl-item-info {
+  display: none;
+}
+.cld-spbl-item:hover .cld-spbl-hover-img {
+  display: block;
+}
+.cld-spbl-item:hover .cld-spbl-hover-img + .cld-spbl-img {
+  display: none;
+}
+
+.cld-spbl-post-play .cld-spbl-post-play-bg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background-size: cover;
+}
+.cld-spbl-post-play .cld-spbl-post-title {
+  position: absolute;
+  font-size: 1.5em;
+  text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
+  left: 0;
+  top: 0.8em;
+  width: 100%;
+  text-align: center;
+}
+.cld-spbl-post-play .cld-spbl-panel {
+  width: 100%;
+  top: 16%;
+  height: 60%;
+  padding: 10px 8px;
+  white-space: nowrap;
+  background: none !important;
+  cursor: grab;
+}
+.cld-spbl-post-play .cld-spbl-panel:active {
+  cursor: grabbing;
+}
+.cld-spbl-post-play .cld-spbl-item {
+  display: inline-block;
+  width: 28%;
+  padding-top: 28%;
+  margin: 0 8px;
+  white-space: normal;
+  vertical-align: top;
+  border-radius: 10px;
+  overflow: hidden;
+  box-shadow: 0 4px 6px 1.2px rgba(0, 0, 0, 0.24), 0 6px 8px 4px rgba(0, 0, 0, 0.24);
+  transform: none;
+}
+.cld-spbl-post-play .cld-spbl-img {
+  max-width: 100%;
+  max-height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  margin: 0 auto auto;
+}
+.cld-spbl-post-play .cld-spbl-replay-btn {
+  position: absolute;
+  left: 5%;
+  bottom: 10%;
+  font-family: inherit;
+  padding: 8px 15px;
+  border-radius: 5px;
+}
+.cld-spbl-post-play .cld-spbl-replay-btn:before {
+  font-family: VideoJS;
+  vertical-align: bottom;
+  margin-right: 4px;
+}
+
+.cld-spbl-post-modal .cld-spbl-bar,
+.cld-spbl-post-modal .vjs-big-play-button,
+.cld-spbl-post-modal .vjs-recommendations-overlay {
+  display: none;
+}
+
+@keyframes tada {
+  0% {
+    transform: scale3d(1, 1, 1);
+  }
+  10%, 20% {
+    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
+  }
+  30%, 50%, 70%, 90% {
+    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
+  }
+  40%, 60%, 80% {
+    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
+  }
+  100% {
+    transform: scale3d(1, 1, 1);
+  }
+}
+.shoppable-products-overlay .vjs-title-bar,
+.shoppable-products-overlay .vjs-big-play-button {
+  display: none !important;
+}
+
+.cld-spbl-products-overlay {
+  position: absolute;
+  width: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.cld-spbl-product-hotspot {
+  pointer-events: all;
+  position: absolute;
+  cursor: pointer;
+  padding: 15px;
+}
+.cld-spbl-product-hotspot:after {
+  content: "";
+  display: block;
+  width: 8px;
+  height: 8px;
+  background: #fff;
+  box-shadow: 0 0 0 4px #0078FF, 0 0 0 8px rgba(0, 120, 255, 0.24);
+  border-radius: 18px;
+}
+.cld-spbl-product-hotspot:hover .cld-spbl-product-tooltip {
+  display: block;
+}
+
+.cld-spbl-product-tooltip {
+  display: none;
+  position: absolute;
+  white-space: nowrap;
+  padding: 4px 6px;
+  border-radius: 4px;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.cld-spbl-product-tooltip.cld-spbl-product-tooltip-top {
+  top: auto;
+  bottom: 100%;
+}
+.cld-spbl-product-tooltip.cld-spbl-product-tooltip-left {
+  top: 50%;
+  right: 100%;
+  left: auto;
+  transform: translateY(-50%);
+}
+.cld-spbl-product-tooltip.cld-spbl-product-tooltip-right {
+  top: 50%;
+  left: 100%;
+  transform: translateY(-50%);
+}
+/*!*********************************************************************************************************************************************!*\
+  !*** css ../node_modules/css-loader/dist/cjs.js!../node_modules/sass-loader/dist/cjs.js!./plugins/interaction-areas/interaction-areas.scss ***!
+  \*********************************************************************************************************************************************/
+.cld-video-player.vjs-user-active .interaction-areas-container {
+  display: block;
+}
+.cld-video-player.interaction-areas .vjs-big-play-button {
+  display: none !important;
+}
+.cld-video-player .interaction-areas-container {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: none;
+  z-index: 1;
+}
+.cld-video-player .interaction-areas-container:hover {
+  display: block;
+}
+.cld-video-player .interaction-areas-container .go-back-button,
+.cld-video-player .interaction-areas-container .vp-ia-item {
+  position: absolute;
+  cursor: pointer;
+}
+.cld-video-player .interaction-areas-container .go-back-button {
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+.cld-video-player .interaction-areas-container .vp-ia-item {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: top, left, width, height;
+  transition-timing-function: linear;
+}
+.cld-video-player .interaction-areas-container .vp-ia-item.theme-shadowed .vp-ia-marker-shadow {
+  opacity: 0.24;
+}
+.cld-video-player .interaction-areas-container .vp-ia-item.theme-pulsing .vp-ia-marker-shadow {
+  -webkit-animation: pulsing-animation 1.3s ease-out;
+  -webkit-animation-iteration-count: infinite;
+  border: solid 2px;
+  opacity: 0;
+}
+.cld-video-player .interaction-areas-container .vp-ia-item:hover .vp-ia-marker-main:before {
+  content: "";
+  width: 20px;
+  height: 20px;
+  border: solid 2px rgba(0, 0, 0, 0.25);
+}
+.cld-video-player .interaction-areas-container .vp-ia-item .vp-ia-area-marker {
+  position: relative;
+  width: 20px;
+  height: 20px;
+}
+.cld-video-player .interaction-areas-container .vp-ia-item .vp-ia-area-marker .vp-ia-marker-main,
+.cld-video-player .interaction-areas-container .vp-ia-item .vp-ia-area-marker .vp-ia-marker-main:before,
+.cld-video-player .interaction-areas-container .vp-ia-item .vp-ia-area-marker .vp-ia-marker-shadow {
+  position: absolute;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  top: 50%;
+  left: 50%;
+}
+.cld-video-player .interaction-areas-container .vp-ia-item .vp-ia-area-marker .vp-ia-marker-main {
+  background-color: white;
+  border: solid 2px;
+  height: 100%;
+  width: 100%;
+}
+.cld-video-player .interaction-areas-container .vp-ia-item .vp-ia-area-marker .vp-ia-marker-shadow {
+  width: 28px;
+  height: 28px;
+}
+.cld-video-player .interaction-areas-container.vp-ia-layout-message {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  z-index: 2;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+.cld-video-player .interaction-areas-container.vp-ia-layout-message.clickable {
+  cursor: pointer;
+}
+.cld-video-player .interaction-areas-container.vp-ia-layout-message.clickable:hover .vp-theme-button {
+  background-color: rgba(255, 255, 254, 0.28);
+}
+.cld-video-player .interaction-areas-container.vp-ia-layout-message .vp-ia-layout-icon {
+  margin-bottom: 20px;
+  height: 60px;
+}
+.cld-video-player .interaction-areas-container.vp-ia-layout-message .vp-ia-layout-message-title {
+  font-size: 24px;
+  line-height: 34px;
+  text-align: center;
+}
+.cld-video-player .interaction-areas-container.vp-ia-layout-message .vp-theme-button {
+  margin: 8px 0 18px 0;
+}
+.cld-video-player .interaction-areas-container.vp-ia-layout-message .vp-ia-layout-message-do-not-show {
+  display: flex;
+  align-items: center;
+}
+.cld-video-player .interaction-areas-container.vp-ia-layout-message .vp-ia-layout-message-do-not-show > * {
+  cursor: pointer;
+}
+.cld-video-player .interaction-areas-container.vp-ia-layout-message .vp-ia-layout-message-do-not-show .vp-ia-layout-message-checkbox-title {
+  margin: 0 0 0 5px;
+}
+
+@-webkit-keyframes pulsing-animation {
+  0% {
+    height: 10px;
+    width: 10px;
+    opacity: 0;
+  }
+  50% {
+    height: 20px;
+    width: 20px;
+    opacity: 1;
+  }
+  100% {
+    height: 40px;
+    width: 40px;
+    opacity: 0;
+  }
+}
 
 /*# sourceMappingURL=cld-video-player.css.map*/