4 Replies - 662 Views - Last Post: 12 July 2018 - 11:40 AM

#1 pfar54   User is offline

  • D.I.C Regular

Reputation: 0
  • View blog
  • Posts: 473
  • Joined: 30-April 15

Video player gets data attribute/inline-style adding in Edge browser

Posted 12 July 2018 - 06:26 AM

If you would try going to https://mbkit.com/about with an Edge browser, you will see the first thing is a video with the black background with a lot of padding. Edge is the only browser that causes this.

Viewing the dom, I was able to see that 83.33% padding-top is being applied. Also a data-attribute
data-ratio
is being applied.

I tried adding the following to help, but I was unsuccessful.

.afterglow .video-js .vjs-afterglow-skin .vjs-responsive .vjs-paused .vjs-controls-enabled .vjs-workinghover .myvideo-dimensions .vjs-user-inactive {
	padding-top: 0 !important;
}


Does anyone see what I have to do to fix this?

Is This A Good Question/Topic? 0
  • +

Replies To: Video player gets data attribute/inline-style adding in Edge browser

#2 ArtificialSoldier   User is offline

  • D.I.C Lover
  • member icon

Reputation: 2041
  • View blog
  • Posts: 6,264
  • Joined: 15-January 14

Re: Video player gets data attribute/inline-style adding in Edge browser

Posted 12 July 2018 - 10:36 AM

You need to stop putting the padding on those elements. Adding another CSS rule isn't necessarily going to fix that, because those elements have that style inline which is going to take highest precedence. So the solution is to not put those styles inline on the elements in the first place.
Was This Post Helpful? 0
  • +
  • -

#3 pfar54   User is offline

  • D.I.C Regular

Reputation: 0
  • View blog
  • Posts: 473
  • Joined: 30-April 15

Re: Video player gets data attribute/inline-style adding in Edge browser

Posted 12 July 2018 - 10:41 AM

I don't put them on. It renders in the DOM. This is all I have in the html:

<video width="600px" class="afterglow" id="myvideo" height="500px" poster="https://s3.us-east-2.amazonaws.com/mbkitsystems/mbkPoster.jpg">
				<source type="video/mp4" src="https://s3.us-east-2.amazonaws.com/mbkitsystems/2017_MBKit_CAPVID.mp4">
			</video>

Was This Post Helpful? 0
  • +
  • -

#4 ArtificialSoldier   User is offline

  • D.I.C Lover
  • member icon

Reputation: 2041
  • View blog
  • Posts: 6,264
  • Joined: 15-January 14

Re: Video player gets data attribute/inline-style adding in Edge browser

Posted 12 July 2018 - 11:14 AM

It definitely looks like there is a script called afterglowplayer which changes that. Why else are you trying to target a certain element with this selector if you only have a video element:

.afterglow .video-js .vjs-afterglow-skin .vjs-responsive .vjs-paused .vjs-controls-enabled .vjs-workinghover .myvideo-dimensions .vjs-user-inactive

That selector isn't in your HTML, right? So, something is adding a bunch of elements, right? And that something is probably afterglowplayer, right? And those elements include inline styles on them, do they not? So wouldn't the solution be to get afterglowplayer to stop putting those inline styles on the elements? Maybe they included a way for you to tell it to not do that, or maybe you have to change the Javascript code.
Was This Post Helpful? 1
  • +
  • -

#5 pfar54   User is offline

  • D.I.C Regular

Reputation: 0
  • View blog
  • Posts: 473
  • Joined: 30-April 15

Re: Video player gets data attribute/inline-style adding in Edge browser

Posted 12 July 2018 - 11:40 AM

I added
data-ratio="none"
to the #myvideo id and it stopped the padding. Thanks.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1