[YoutubePlayer] Responsive

[YoutubePlayer] Responsive

Forge Component
Published on 2015-04-07 by Ricardo Silva
6 votes
Published on 2015-04-07 by Ricardo Silva
Is there a way to make this player responsive?

Kind regards,
No, it pretty much uses the provided width and height to create the player.

I'm not even sure if it's possible to have the youtube player javascript API responsive, but it might be.

It's a good feature request, I'll keep it in mind for future versions.
To make youtube, vimeo and some other videos responsive you can do it with a little bit of CSS.

Have this in your style sheet:

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
Then you can wrap the iframe embed code with the videoWrapper class, like so:

<div class="videoWrapper">
    <!-- Copy & Pasted from YouTube -->
    <iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
This will do it.
reference: css-tricks.com