If you don't find an answer, please click here to post your question.
Reply
Occasional Visitor
Posts: 3
Registered: ‎08-21-2018

How to make reponsive video container div?

My current CSS for video and container:

.header-container{
    width: 100% !important;
    height: auto !important;
    border-left: none;
    border-right: none;
    position: relative;
    padding: 20px;
} 

    video-container{
    position: absolute;
    top: 0%;
    left: 0%;
    height: 100%;
    width: 100%;
    overflow: hidden;
} 

     .video{
     position: absolute;
     z-index: -1;
     opacity: 0.78;
     widows: 100%;
     width: 100% !important;
     height: auto !important;
     margin:0 auto;
 } 

 

Ooyalan
Posts: 11
Registered: ‎11-05-2017

Re: How to make reponsive video container div?

Hello,
 
My name is Dmytro, I’m from Ooyala Technical Support.
 
Our html player v4 is responsive by default. Below you can find the html page with embedded ooyala video player. Could you please check it and let me know the results?
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <!-- Include plugins necessary for player -->
  <!-- core provides basic player support-->
  <script src="//player.ooyala.com/static/v4/production/latest/core.js"></script>
  <!-- bit_wrapper supports HLS-everywhere and Dash support -->
  <script src="//player.ooyala.com/static/v4/production/latest/video-plugin/bit_wrapper.js"></script>
  <!-- main_html5 support browser supported video formats -->
  <script src="//player.ooyala.com/static/v4/production/latest/video-plugin/main_html5.js"></script>
  <!-- Player UI Definitions-->
  <script src="//player.ooyala.com/static/v4/production/latest/skin-plugin/html5-skin.js"></script>
  <!-- Include the style sheet used by the player -->
  <link rel="stylesheet" href="//player.ooyala.com/static/v4/production/latest/skin-plugin/html5-skin.css"/>
</head>

<body>
  <div id='container'></div>
  <script>
    var playerParam = {
      'pcode':'YOUR  PCODE HERE',
      'playerBrandingId':'YOUR PLAYER ID HERE',
    };
    OO.ready(function() {
      window.pp = OO.Player.create('container', 'EMBED CODE HERE', playerParam);
    });
  </script>
</body>
</html>
Highlighted
Occasional Advisor
Posts: 6
Registered: ‎10-02-2018

Re: How to make reponsive video container div?

Our little 100% width trick isn't going to help us when dealing with video that is delivered via iframe. Setting a height is required,

Advisor
Posts: 14
Registered: ‎10-06-2018

Re: How to make reponsive video container div?

Our little 100% width trick isn't going to help us when dealing with video that is delivered via iframe. Setting a height is required, Clean Master  Facebook Lite  Mathway