Making Player Responsive #402

wicherdt · 2015-03-24T09:44:41Z

Responsive, players scale to the width of their container element, maintaining the video aspect ratio.

towerz · 2015-03-24T22:46:51Z

@wicherdt Please check the commit ea33aa1. This will enable the player to properly scale with the container element if any of its dimensions are set to a percentage value.

wicherdt · 2015-03-25T10:19:49Z

I checked this example:
http://pastebin.com/WLNXsPzu
And horizontal working semms OK.
But vertical!
if I add parameter:
height: "100%",
Player dont show on page.
In Firefox firebug I see #player height is 0.

How to use percentage width and height with bootstrap responsive grid?
I am sure I used clappr with commit ea33aa1

towerz · 2015-03-25T22:01:35Z

@wicherdt Check this fiddle showing how to make a fluid resize of the player: http://jsfiddle.net/oujfL91o/.

When using percentage values, the parent element must have its height defined. In your example, #player will have an automatic height, which by default is the computed size of its children tree. If you add the parameter height: '100%', you are telling the player to use the height of its parent, which in turn would be computed to zero, since no child element has an actual size. They are all computed using percentages.

With a responsive grid, the width parameter is not an issue, because the grid defines the width of the elements according to resolution. You used an external div with the class embed-responsive-16by9, which already sets the height of the element to keep the 16:9 ratio. Since the player does not change any properties of its parent, I recommend changing the following code:

<div class="embed-responsive embed-responsive-16by9">
    <div id="player"></div>
</div>

to

<div id="player" class="embed-responsive embed-responsive-16by9"></div>.

I believe this will solve your problem.

Please note that percentage values are only supported on Clappr 0.0.114 or later.

wicherdt · 2015-03-26T09:37:46Z

Thank you for your help.
Example below work for me OK.
But I used function resize not resizable.

Bootstrap 3.3.4 Clappr 0.0.114 jQuery 1.11.2 responsive example:

<div class="container-fluid">
    <div class="row">
    <div class="col-md-6 col-md-offset-3 col-sm-6 col-sm-offset-3">
        <div class="embed-responsive embed-responsive-16by9">
        <div id="player" class="embed-responsive-item"></div>
        </div>
<script>
$(function () {
    $("#player").resize({
        aspectRatio: 16 / 9,
        maxHeight: 720,
        maxWidth: 1280,
        minHeight: 180,
        minWidth: 320
    });
    var player = new Clappr.Player({
        source: 'http://clappr.io/highline.mp4',
        baseUrl: 'http://cdn.clappr.io/latest',
        poster: 'http://clappr.io/poster.png',
        parentId: "#player",
        height: "100%",
        width: "100%"
    });
});
</script>
    </div>
    </div>
</div>

towerz · 2015-03-26T14:41:39Z

@wicherdt Anytime. The resizable function was only to demonstrate the fluid resizing of the player, adding a resize handle so it will adjust to any size you want.

Since the player is working on your responsive grid, I'm closing this issue. Please reopen if there are any other problems related to it.

ralyodio · 2015-12-14T03:39:12Z

I'm not using bootstrap and jquery doesn't have a resizable method.

Is there anyway to get a responsive player?

leandromoreira · 2015-12-14T12:29:14Z

@chovy there is a resize method.

ralyodio · 2015-12-14T19:10:36Z

@leandromoreira I assume i would need to call player.resize() from window resize event....is there anyway to keep the aspect ratio though? I want to take up all of the viewport but keep the aspect ratio 16x9

me-vlad · 2015-12-14T19:43:48Z

@chovy you can do something like

  function resizePlayer(){
    var aspectRatio = 9/16,
    newWidth = document.getElementById('yourplayer').parentElement.offsetWidth,
    newHeight = 2 * Math.round(newWidth * aspectRatio/2);
    player.resize({width: newWidth, height: newHeight});
  }

  resizePlayer();
  window.onresize = resizePlayer;

ralyodio · 2015-12-15T01:46:39Z

Uncaught TypeError: player.resize is not a function

getting an error that player.resize doesn't exist.

ralyodio · 2015-12-15T01:59:12Z

nm, i had called player before it was defined.

me-vlad · 2015-12-15T02:07:47Z

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <script type="text/javascript" charset="utf-8" src="http://cdn.clappr.io/latest/clappr.min.js"></script>
  <title>Clappr Player</title>
</head>
<body>
<div style="overflow:hidden;width:640px;">
  <div id="player-wrapper"></div>
</div>
<script type="text/javascript" charset="utf-8">
window.onload = function() {

  var player = new Clappr.Player({
    parentId: '#player-wrapper',
    source: 'http://clappr.io/highline.mp4'
  });

  function resizePlayer(){
    var aspectRatio = 9/16,
    newWidth = document.getElementById('player-wrapper').parentElement.offsetWidth,
    newHeight = 2 * Math.round(newWidth * aspectRatio/2);
    player.resize({width: newWidth, height: newHeight});
  }

  resizePlayer();
  window.onresize = resizePlayer; 
}
</script>
</body>
</html>

agopshi · 2016-07-19T18:20:04Z

For what it's worth, here's a CSS-only solution to making the player responsive:

/* Fix the player container to take up 100% width and to calculate its height based on its children. */
[data-player] {
    position: relative;
    width: 100%;
    height: auto;
    margin: 0;    
}

/* Fix the video container to take up 100% width and to calculate its height based on its children. */
[data-player] .container[data-container] {
    width: 100%;
    height: auto;
    position: relative;
}

/* Fix the media-control element to take up the entire size of the player. */
[data-player] .media-control[data-media-control] {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

/* Fix the video element to take up 100% width and to calculate its height based on its natural aspect ratio. */
[data-player] video {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
}

It'll take up 100% width and use its natural aspect ratio (instead of forcing the aspect ratio through styles). When you create the player, just use:

width: '100%',
height: 'auto'

paluh · 2016-09-16T11:22:40Z

@chovy I want to add a really small "patch" to @me-vlad solution (anyway thanks for this snippet @me-vlad!). It's better to not use window.onresize directly (in case you want to have multpile players on one page):

So instead of:

   window.onresize = resizePlayer;

it's better to do this (as suggested here):

   var addEventListener = (function() {
     if(document.addEventListener) {
       return function(element, event, handler) {
         element.addEventListener(event, handler, false);
       };
     } else {
       return function(element, event, handler) {
           element.attachEvent('on' + event, handler);
       };
     }
   }());

   addEventListener(window, 'resize', resizePlayer);

ralyodio · 2016-09-18T02:07:55Z

Thanks. It would be nice if we could just have an option like player({ responsive: true })

On Fri, Sep 16, 2016 at 4:22 AM, paluh notifications@github.com wrote:

@chovy https://github.com/chovy I want to add a really small "patch" to
@me-vlad https://github.com/me-vlad solution (anyway thanks for this
snippet @me-vlad https://github.com/me-vlad!). It's better to not use
window.onresize directly (in case you want to have multpile players on
one page):

So instead of:

window.onresize = resizePlayer;

it's better to do this (as suggested here
http://stackoverflow.com/questions/13651274/how-can-i-attach-a-window-resize-event-listener-in-javascript%5D
):

var addEventListener = (function() {
if(document.addEventListener) {
return function(element, event, handler) {
element.addEventListener(event, handler, false);
};
} else {
return function(element, event, handler) {
element.attachEvent('on' + event, handler);
};
}
}());

addEventListener(window, 'resize', resizePlayer);

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#402 (comment), or mute
the thread
https://github.com/notifications/unsubscribe-auth/AABq9RaU3AF6trAxJ6fAJTSZNuTzITCjks5qqnwGgaJpZM4DzrwL
.

Anthony

ralyodio · 2016-09-18T05:38:42Z

@paluh how does using addEventListener vs. window.onresize change anything to do with not firing on window resize?

leandromoreira · 2016-09-18T13:14:02Z

Thanks. It would be nice if we could just have an option like player({ responsive: true })

I think it is already responsive, check this, you need to put it on a responsive container though.

paluh · 2016-09-18T13:51:45Z

@chovy With window.onresize (I've tested this on chromium) you are assigning single event handler and overwriting others, so if you have multiple players initializations done with multiple window.onresize assignments only the last one callback is going to be called (here is appropriate answer from an other related question on stackoverflow).

Allan-Nava · 2019-12-04T09:18:46Z

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <script type="text/javascript" charset="utf-8" src="http://cdn.clappr.io/latest/clappr.min.js"></script>
  <title>Clappr Player</title>
</head>
<body>
<div style="overflow:hidden;width:640px;">
  <div id="player-wrapper"></div>
</div>
<script type="text/javascript" charset="utf-8">
window.onload = function() {

  var player = new Clappr.Player({
    parentId: '#player-wrapper',
    source: 'http://clappr.io/highline.mp4'
  });

  function resizePlayer(){
    var aspectRatio = 9/16,
    newWidth = document.getElementById('player-wrapper').parentElement.offsetWidth,
    newHeight = 2 * Math.round(newWidth * aspectRatio/2);
    player.resize({width: newWidth, height: newHeight});
  }

  resizePlayer();
  window.onresize = resizePlayer; 
}
</script>
</body>
</html>

this works with 16/9 for the player?

kslimani · 2019-12-04T10:11:57Z

@Allan-Nava as described by previous comments, when you set width and height Clappr options to '100%', then it resize automatically to the "player container" element.

Therefore, if you set these options to '100%' you are free to apply any css rules (or js) to the "player container" element.

For example, using Bootstrap CSS utilities :

<html>
  <head>
    <title>Clappr Bootstap 16/9</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@latest/dist/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/clappr@latest/dist/clappr.min.js"></script>
  </head>
  <body>
    <div class="container">
        <!-- 16:9 aspect ratio -->
        <div class="embed-responsive embed-responsive-16by9">
          <div class="embed-responsive-item player"></div>
        </div>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function() {

          var player = new Clappr.Player({
            parentId: '.player',
            source: 'https://acme.org/path/to/my-video.mp4',
            height: '100%',
            width: '100%',
          });

        });      
    </script>
  </body>
</html>

sapolio · 2019-12-04T10:41:02Z

also consider a simple way to proportional wrap without bootstrap or js:

<div style="width: 100%; max-width: 1280px; margin: auto;">
	<div style="position: relative; padding-top: 56.25%;">
		<div style="position: absolute; top: 0; right: 0; bottom: 0; left: 0;">
			<div id="player-container">
				<!-- The player configured 100% by 100% -->
			</div>
		</div>
	</div>
</div>

P.S. Inline style is not considered a best practice. I use it for brevity :)

Allan-Nava · 2019-12-04T10:42:09Z

Okay it works with the bootstrap class! Thanks

towerz closed this as completed Mar 26, 2015

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Making Player Responsive #402

Making Player Responsive #402

wicherdt commented Mar 24, 2015

towerz commented Mar 24, 2015

wicherdt commented Mar 25, 2015

towerz commented Mar 25, 2015

wicherdt commented Mar 26, 2015

towerz commented Mar 26, 2015

ralyodio commented Dec 14, 2015

leandromoreira commented Dec 14, 2015

ralyodio commented Dec 14, 2015

me-vlad commented Dec 14, 2015

ralyodio commented Dec 15, 2015

ralyodio commented Dec 15, 2015

me-vlad commented Dec 15, 2015

agopshi commented Jul 19, 2016

paluh commented Sep 16, 2016

ralyodio commented Sep 18, 2016

ralyodio commented Sep 18, 2016

leandromoreira commented Sep 18, 2016

paluh commented Sep 18, 2016 •

edited

Allan-Nava commented Dec 4, 2019

kslimani commented Dec 4, 2019

sapolio commented Dec 4, 2019

Allan-Nava commented Dec 4, 2019

Making Player Responsive #402

Making Player Responsive #402

Comments

wicherdt commented Mar 24, 2015

towerz commented Mar 24, 2015

wicherdt commented Mar 25, 2015

towerz commented Mar 25, 2015

wicherdt commented Mar 26, 2015

Bootstrap 3.3.4 Clappr 0.0.114 jQuery 1.11.2 responsive example:

towerz commented Mar 26, 2015

ralyodio commented Dec 14, 2015

leandromoreira commented Dec 14, 2015

ralyodio commented Dec 14, 2015

me-vlad commented Dec 14, 2015

ralyodio commented Dec 15, 2015

ralyodio commented Dec 15, 2015

me-vlad commented Dec 15, 2015

agopshi commented Jul 19, 2016

paluh commented Sep 16, 2016

ralyodio commented Sep 18, 2016

ralyodio commented Sep 18, 2016

leandromoreira commented Sep 18, 2016

paluh commented Sep 18, 2016 • edited

Allan-Nava commented Dec 4, 2019

kslimani commented Dec 4, 2019

sapolio commented Dec 4, 2019

Allan-Nava commented Dec 4, 2019

paluh commented Sep 18, 2016 •

edited