@zohodesk/dot/lib/VideoLookup/css/VideoLookup.module.css

In this Library, we Provide Some Basic Components to Build Your Application

.videoContainer {
  height: var(--zd_size567) ;
  width: var(--zd_size1008) ;
  overflow: hidden;
}
.close {
  width: var(--zd_size40) ;
  --button_padding: 6px 0;
  --button_text_color: var(--zdt_videolookup_close);
  position: absolute;
  top: var(--zd_size20) ;
}
[dir=ltr] .close {
  right: var(--zd_size20) ;
}
[dir=rtl] .close {
  left: var(--zd_size20) ;
}
.close:hover {
  --button_bg_color: var(--zdt_videolookup_close_hover_bg);
  --button_text_color: var(--zdt_videolookup_close_hover);
}

/* @media screen and (max-width: 1162px) {
  .videoContainer {
    height: 470px;
    width: 836px;
  }
} */

.videoIframe,
.videoPlayer {
  width: 100% ;
  height: 100% ;
}

.videoIframe, .videoPlayer {
  border: none;
}

@media screen and (max-width: 1162px) {
  .videoContainer {
    height: var(--zd_size470) ;
    width: var(--zd_size836) ;
  }
}

@media screen and (max-width: 992px) {
  .videoContainer {
    height: var(--zd_size400) ;
    width: var(--zd_size700) ;
  }
}

@media screen and (max-width: 768px) {
  .videoContainer {
    height: var(--zd_size320) ;
    width: 100% ;
  }
}

@media screen and (max-width: 480px) {
  .videoContainer {
    height: var(--zd_size240) ;
    width: 100% ;
  }
}