Commit d1197f1e authored by Rajab Natshah's avatar Rajab Natshah
Browse files

Issue #3317532: Fix Ultrawide screens with embed responsive in Varbase video... 

Issue #3317532: Fix Ultrawide screens with embed responsive in Varbase video player for YouTube and Vimeo embedded Video Slides in Vartheme BS4 and in the Vartheme Sub-theme template
parent ece442be

VARTHEME_BS4_SUBTHEME/css/theme/varbase-heroslider-media.theme.css

+12 −0
Original line number Diff line number Diff line
@@ -208,6 +208,12 @@ 
  padding-bottom: 0;

  transform: translateY(-50%) translateX(-50%);

}



@media screen and (min-width: 1200px) {

  .varbase-heroslider-media .node--type-varbase-heroslider-media .field--name-field-media-single .varbase-video-player.embed-responsive {

    height: auto;

  }

}

.varbase-heroslider-media .node--type-varbase-heroslider-media .field--name-field-media-single .field--type-image {

  position: absolute;

  top: 0;
@@ -256,6 +262,12 @@ 
  }

}



@media screen and (max-aspect-ratio: 16/9) and (min-width: 1200px) {

  .varbase-heroslider-media .node--type-varbase-heroslider-media .field--name-field-media-single .varbase-video-player.embed-responsive {

    height: auto;

  }

}



@supports (object-fit: cover) {

  .varbase-heroslider-media .node--type-varbase-heroslider-media .field--name-field-media-single img {

    top: 0;

VARTHEME_BS4_SUBTHEME/scss/theme/varbase-heroslider-media.theme.scss

+6 −0
Original line number Diff line number Diff line
@@ -211,6 +211,9 @@ 
          position: relative;

          width: 100vw;

          height: 130vh;

          @media screen and (min-width: map-get($grid-breakpoints, "xl")) {

            height: auto;

          }

          top: 50%;

          left: 50%;

          transform: translateY(-50%) translateX(-50%);
@@ -266,6 +269,9 @@ 
            position: relative;

            width: 240vw;

            height: 140vh;

            @media screen and (min-width: map-get($grid-breakpoints, "xl")) {

              height: auto;

            }

            top: 50%;

            transform: translateY(-50%) translateX(-50%);

            padding-bottom: 0 !important;

css/theme/varbase-heroslider-media.theme.css

+12 −0
Original line number Diff line number Diff line
@@ -208,6 +208,12 @@ 
  padding-bottom: 0;

  transform: translateY(-50%) translateX(-50%);

}



@media screen and (min-width: 1200px) {

  .varbase-heroslider-media .node--type-varbase-heroslider-media .field--name-field-media-single .varbase-video-player.embed-responsive {

    height: auto;

  }

}

.varbase-heroslider-media .node--type-varbase-heroslider-media .field--name-field-media-single .field--type-image {

  position: absolute;

  top: 0;
@@ -256,6 +262,12 @@ 
  }

}



@media screen and (max-aspect-ratio: 16/9) and (min-width: 1200px) {

  .varbase-heroslider-media .node--type-varbase-heroslider-media .field--name-field-media-single .varbase-video-player.embed-responsive {

    height: auto;

  }

}



@supports (object-fit: cover) {

  .varbase-heroslider-media .node--type-varbase-heroslider-media .field--name-field-media-single img {

    top: 0;

scss/theme/varbase-heroslider-media.theme.scss

+6 −0
Original line number Diff line number Diff line
@@ -211,6 +211,9 @@ 
          position: relative;

          width: 100vw;

          height: 130vh;

          @media screen and (min-width: map-get($grid-breakpoints, "xl")) {

            height: auto;

          }

          top: 50%;

          left: 50%;

          transform: translateY(-50%) translateX(-50%);
@@ -266,6 +269,9 @@ 
            position: relative;

            width: 240vw;

            height: 140vh;

            @media screen and (min-width: map-get($grid-breakpoints, "xl")) {

              height: auto;

            }

            top: 50%;

            transform: translateY(-50%) translateX(-50%);

            padding-bottom: 0 !important;