Topic: SaaS Template not working in Chromium

banksidepoet pro asked 5 years ago


Hi.

I have purchased the SaaS Premium Template, downloaded it opened the "home-video" homepage which displays an embedded youtube video on the right half.

When I click on the "full screen" icon in the video player in Firefox, it plays full screen, normally.

When I do the same in Chromium, I get: a black background taking up the grid column (so the bottom right quarter of the screen) with the video playing in an area the same size as it was before I clicked full screen in the top left of this black box. The video looks as though its enlarged: only a portion of it is visible in the video area but the video area has not changed in size at all from the px settings of the iframe in the code.

<div class="row welcome">
<div class="col">

<!--Intro Section-->
<section class="view intro-2 visible">
<div class="mask pattern-2">
<div class="container h-100 d-flex justify-content-center align-items-center">
<div class="row d-flex justify-content-center">

<!-- Grid column -->
<div class="col-md-12 col-lg-5 text-center text-lg-left margins">
<div class="white-text">
<h1 class="h1-responsive font-weight-bold mt-sm-5 mt-lg-0 mb-4 wow fadeInLeft" data-wow-delay="0.3s"><img src="/img/svg/logo-w-80h.svg" /></h1>
<hr class="hr-light wow fadeInLeft" data-wow-delay="0.3s">
<h6 class="wow fadeInLeft" data-wow-delay="0.3s">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem repellendus quasi fuga nesciunt
dolorum nulla magnam veniam sapiente, fugiat! Commodi sequi non animi ea dolor molestiae
iste.
</h6>
<br>
<a class="btn pink-gradient btn-rounded btn-lg font-weight-bold wow fadeInLeft" data-wow-delay="0.4s">Get started</a>
<a class="btn btn-white btn-rounded btn-lg orange-text font-weight-bold ml-lg-0 wow fadeInLeft" data-wow-delay="0.4s">
<i class="fa fa-play-circle orange-text mr-2" aria-hidden="true"></i> Watch demo</a>
</div>
</div>
<!-- /.Grid column -->

<!-- Grid column -->
<div class="col-md-12 col-lg-6 text-center wow fadeInRight" data-wow-delay="0.3s">

<div class="wrapper">
<img id="video-cover" src="/img/vector/laptop.png" alt="Video title">
<iframe id="player" width="425" height="349" src="http://www.youtube.com/embed/M5nRGf8QmqE" allowFullScreen frameborder="0"></iframe>
<button id="play" class="play-btn">
<svg enable-background="new 0 0 141.73 141.73" height="141.73px" id="Warstwa_1" version="1.1" viewBox="0 0 141.73 141.73"
width="141.73px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g>
<path d="M101.628,40.092c-8.22-8.22-19.149-12.746-30.774-12.746c-11.624,0-22.553,4.526-30.772,12.746 c-16.968,16.969-16.967,44.578,0.001,61.546c8.22,8.22,19.149,12.747,30.773,12.747s22.553-4.526,30.772-12.746 s12.747-19.148,12.747-30.773S109.848,48.312,101.628,40.092z M100.214,100.225c-7.842,7.842-18.269,12.16-29.358,12.16 s-21.517-4.319-29.359-12.161c-16.188-16.188-16.188-42.529-0.001-58.718c7.842-7.842,18.269-12.16,29.358-12.16 c11.091,0,21.518,4.318,29.36,12.16c7.842,7.843,12.161,18.269,12.161,29.359S108.056,92.382,100.214,100.225z"
fill="#112f6b" />
<path d="M65.893,55.983c-0.391-0.391-1.023-0.391-1.414,0s-0.391,1.023,0,1.414l13.466,13.466L64.478,84.331 c-0.391,0.391-0.391,1.023,0,1.414c0.195,0.195,0.451,0.293,0.707,0.293s0.512-0.098,0.707-0.293L80.065,71.57 c0.391-0.391,0.391-1.023,0-1.414L65.893,55.983z"
fill="#112f6b" />
</g>
</svg>
</button>
</div>

</div>
<!-- /.Grid column -->

</div>
</div>
</div>
</section>

</div> <!-- col -->
</div> <!-- row -->

Help?


Anna Morawska staff commented 5 years ago

Hi banksidepoet, thank you for reporting this. I've tried to recreate this situation, but it looks like everything works fine, in Chromium too. I can take a look at this, but please send me all of your files or link to GitHub repo. I will try to figure out what's wrong. Best, Ania [ a.morawska@mdbootstrap.com ]

banksidepoet pro answered 5 years ago


Hi, Ania. Thank you for all of your help in getting this sorted. To summarise (for others who may have the same issue):
  1. To remove horizontal scrollbar, ensure <div> containing ".row" also contains ".no-gutter".
  2. To make full screen work in Chromium, add the following declaration to your "overrides" css file:
.animated { animation-fill-mode: none; } Cheers, Ania. Mike

Anna Morawska staff commented 5 years ago

Thanks, Mike! :)

banksidepoet pro answered 5 years ago


Hi, Ania. I have sent you all of the files to your email address. Thanks for the help.

Anna Morawska staff commented 5 years ago

Hi there, thank you, I'll check it out. Best, Ania


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags