Plyr breaks the Bootstrap responsive embed

[brunoamaral]

Expected behaviour

Applying Plyr over the Bootstrap embed code, should keep the aspect ratio.

Actual behaviour

Instead, the video stretches all the way to the bottom of the page

Steps to reproduce

Load player with a bootstrap embed:

<div class="embed-responsive embed-responsive-16by9 player">
	<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/{{ .Get 0 }}?rel=0&amp;iv_load_policy=3&amp;modestbranding=1&amp;playsinline=1&amp;showinfo=0&amp;rel=0&amp;enablejsapi=1" allowfullscreen allowtransparency allow="autoplay"></iframe>
</div>

Environment

• Browser: Chrome / Brave
• Version: 1.4.96 Chromium: 80.0.3987.132 (Official Build) (64-bit)
• Operating System: MacOS
• Version: Catalina

Console errors (if any)

Link to where the bug is happening

https://brunoamaral.eu/post/algorithms-artificial-intelligence-and-us/

[sampotts]

Why not just use Plyr without the extra bootstrap stuff?

[brunoamaral]

You're right and I just tried to use the default example code on the readme. Yet the problem still occurs. I have updated the link with the new code.

[sampotts]

I think you need to update the CSS as it looks like your CSS has height: 100% for .plyr which is causing the issue. Try grabbing the latest styles.

[brunoamaral]

@sampotts thank you, removing the height does fix it on the page.

I was using the file in the dist folder https://github.com/sampotts/plyr/blob/master/dist/plyr.css

And even after building from source, the .plyr 100% height is still there.

[sampotts]

You're correct! I'll check it's needed (don't think it is) and remove it if it's not.