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: 14
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>
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: 19
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

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

Re: How to make reponsive video container div?

Hey, first of all thank you for the fast response. I did deleted the dot from video, that was a silly mistake, and I've add position relative to header-container and video-container and removed the position absolute. It looks better now but there is still huge amount of white space. I do understand what every single code means but this is my first project and I'm not familiar with how different div styles work with each other due to my lack of practical experience.