Ooyala responsive workaround

Responsive Styles for Ooyala

 if (document.querySelector('div[id*="ooyalaplayer"]') !== null) {
    /** Do some vanilla javascript style tag creation **/
   var style = document.createElement('style'),
        styleTag = 'div[id*="ooyalaplayer"] {' +
                            ' width: 100%!important;' +
                            ' position: relative!important;' +
                            ' padding: 56.3% 0 0 0!important; //56.3% = 16:9 ratio' +
                            '}' + 
                            'div[id*="ooyalaplayer"] > .video {' +
                            ' position: absolute!important;' +
                            ' left: 0!important;' +
                            ' top: 0!important;' +
                            ' }' +
                            'div[id*="ooyalaplayer"] .innerWrapper {' +
                            ' position: absolute!important;' +
                            ' top: 0!important;' +
                            ' left: 0!important;' +
                            ' width: 100%!important;' +
                            ' height: 100%!important;' +
                        '} ' ;
                        /** it's ugly as sin to keep all these !important values forced on the css properties.
                         ** but Ooyala's styles don't help either
                         **/
    style.type = 'text/css';
    if (style.styleSheet){
        //modern browsers support cssText to style Tags. 
        style.styleSheet.cssText = styleTag;
    } else {
      //elsewise we just serialize the string inbetween the tags
    style.appendChild(document.createTextNode(styleTag));
    }
        /** This is assuming we are appending this style tag to a wordpress article
     ** which usually uses "entry-content" as it's main content tag 
     **/
        document.getElementsByClassName('entry-content')[0].appendChild(style);
}