{"action":"created","issue":{"url":"https://api.github.com/repos/johndyer/mediaelement/issues/1963","repository_url":"https://api.github.com/repos/johndyer/mediaelement","labels_url":"https://api.github.com/repos/johndyer/mediaelement/issues/1963/labels{/name}","comments_url":"https://api.github.com/repos/johndyer/mediaelement/issues/1963/comments","events_url":"https://api.github.com/repos/johndyer/mediaelement/issues/1963/events","html_url":"https://github.com/johndyer/mediaelement/issues/1963","id":195527098,"number":1963,"title":"'Respsonsive' Methods Don't Work Correctly","user":{"login":"thejamespower","id":7080202,"avatar_url":"https://avatars.githubusercontent.com/u/7080202?v=3","gravatar_id":"","url":"https://api.github.com/users/thejamespower","html_url":"https://github.com/thejamespower","followers_url":"https://api.github.com/users/thejamespower/followers","following_url":"https://api.github.com/users/thejamespower/following{/other_user}","gists_url":"https://api.github.com/users/thejamespower/gists{/gist_id}","starred_url":"https://api.github.com/users/thejamespower/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/thejamespower/subscriptions","organizations_url":"https://api.github.com/users/thejamespower/orgs","repos_url":"https://api.github.com/users/thejamespower/repos","events_url":"https://api.github.com/users/thejamespower/events{/privacy}","received_events_url":"https://api.github.com/users/thejamespower/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":17,"created_at":"2016-12-14T13:11:41Z","updated_at":"2016-12-16T15:26:54Z","closed_at":"2016-12-14T15:34:52Z","body":"If resizing the browser, video scales but then black areas are shown and aspect ratio is not maintained. Screenshot is taken from responsive demo test in repo'. This causes issues if the user resizes their viewport or on orientation change etc. Refreshing the page fixes the issue, so assume something isn't working correctly on resize events.\r\n\r\n<img width=\"1487\" alt=\"screen shot 2016-12-14 at 13 09 18\" src=\"https://cloud.githubusercontent.com/assets/7080202/21183214/cd2a317e-c1fe-11e6-90e2-1f86f26de6df.png\">\r\n"},"comment":{"url":"https://api.github.com/repos/johndyer/mediaelement/issues/comments/267618415","html_url":"https://github.com/johndyer/mediaelement/issues/1963#issuecomment-267618415","issue_url":"https://api.github.com/repos/johndyer/mediaelement/issues/1963","id":267618415,"user":{"login":"ron666","id":910829,"avatar_url":"https://avatars.githubusercontent.com/u/910829?v=3","gravatar_id":"","url":"https://api.github.com/users/ron666","html_url":"https://github.com/ron666","followers_url":"https://api.github.com/users/ron666/followers","following_url":"https://api.github.com/users/ron666/following{/other_user}","gists_url":"https://api.github.com/users/ron666/gists{/gist_id}","starred_url":"https://api.github.com/users/ron666/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ron666/subscriptions","organizations_url":"https://api.github.com/users/ron666/orgs","repos_url":"https://api.github.com/users/ron666/repos","events_url":"https://api.github.com/users/ron666/events{/privacy}","received_events_url":"https://api.github.com/users/ron666/received_events","type":"User","site_admin":false},"created_at":"2016-12-16T15:26:54Z","updated_at":"2016-12-16T15:26:54Z","body":"@thejamespower I used the demo file in `3.x-dev`, tested in Browserstack on Win7 IE8 and it worked for me.\r\n<img width=\"952\" alt=\"screen shot 2016-12-16 at 10 24 42 am\" src=\"https://cloud.githubusercontent.com/assets/910829/21267814/fe9b5a90-c379-11e6-9b1a-366b49ec74ee.png\">\r\nThe only thing is the icons since they are SVGs.\r\n\r\nHere's the markup I used for the demo file; please test it and let me know:\r\n\r\n```html\r\n<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\r\n    <title>MediaElement.js 3.0 - audio/video unification library</title>\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n    <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css\">\r\n    <link rel=\"stylesheet\" href=\"../build/mediaelementplayer.min.css\">\r\n\r\n    <style>\r\n\r\n        #container {\r\n            padding: 0 20px 50px;\r\n        }\r\n        .error {\r\n            color: red;\r\n        }\r\n        a {\r\n            word-wrap: break-word;\r\n        }\r\n\r\n    </style>\r\n\r\n    <script src=\"../build/jquery.js\"></script>\r\n\r\n    <script src=\"../build/mediaelement-and-player.min.js\"></script>\r\n    <script src=\"../build/lang/cs.js\"></script>\r\n    <script src=\"../build/lang/de.js\"></script>\r\n    <script src=\"../build/lang/en.js\"></script>\r\n    <script src=\"../build/lang/es.js\"></script>\r\n    <script src=\"../build/lang/fr.js\"></script>\r\n    <script src=\"../build/lang/hu.js\"></script>\r\n    <script src=\"../build/lang/it.js\"></script>\r\n    <script src=\"../build/lang/ja.js\"></script>\r\n    <script src=\"../build/lang/ko.js\"></script>\r\n    <script src=\"../build/lang/nl.js\"></script>\r\n    <script src=\"../build/lang/pl.js\"></script>\r\n    <script src=\"../build/lang/pt.js\"></script>\r\n    <script src=\"../build/lang/pt-br.js\"></script>\r\n    <script src=\"../build/lang/ro.js\"></script>\r\n    <script src=\"../build/lang/ru.js\"></script>\r\n    <script src=\"../build/lang/sk.js\"></script>\r\n    <script src=\"../build/lang/zh-cn.js\"></script>\r\n    <script src=\"../build/lang/zh.js\"></script>\r\n\r\n</head>\r\n\r\n<body>\r\n\r\n    <div id=\"container\">\r\n        <section>\r\n        <h1>MediaElement.js</h1>\r\n\r\n        <h2><em>audio/video</em> unification library</h2>\r\n\r\n        <p><em>MediaElement</em> is a wrapper that mimics the native HTML5 MediaElement syntax (get/set) as a renderer that\r\n            can handle media from HTML5, YouTube, Vimeo, Soundcloud, Flash, Facebook, and other libraries.</p>\r\n\r\n        <p><em>MediaElementPlayer</em> is built off of MediaElement and creates a fully featured player on top of the\r\n            unified syntax from MediaElement.</p>\r\n        </section>\r\n\r\n        <section>\r\n            <h3>Global Options</h3>\r\n            <form action=\"#\" method=\"get\">\r\n                <label>Language <select name=\"lang\">\r\n                    <option value=\"cs\">Čeština / Czech (cs)</option>\r\n                    <option value=\"de\">Deutsch / German (de)</option>\r\n                    <option value=\"en\" selected>English (en)</option>\r\n                    <option value=\"es\">Español / Spanish; Castilian (es)</option>\r\n                    <option value=\"fr\">Français / French (fr)</option>\r\n                    <option value=\"hu\">Magyar / Hungarian (hu)</option>\r\n                    <option value=\"it\">Italiano / Italian (it)</option>\r\n                    <option value=\"ja\">日本語 / Japanese (ja)</option>\r\n                    <option value=\"ko\">한국어 / Korean (ko)</option>\r\n                    <option value=\"nl\">Nederlands / Dutch (nl)</option>\r\n                    <option value=\"pl\">Polski / Polish (pl)</option>\r\n                    <option value=\"pt\">Português / Portuguese (pt)</option>\r\n                    <option value=\"pt-BR\">Português / Portuguese (BR) (pt-BR)</option>\r\n                    <option value=\"ro\">Română / Romanian (ro)</option>\r\n                    <option value=\"ru\">Русский / Russian (ru)</option>\r\n                    <option value=\"sk\">Slovensko / Slovak (sk)</option>\r\n                    <option value=\"zh-cn\">简体中文 / Simplified Chinese (zh-CN)</option>\r\n                    <option value=\"zh\">繁体中文 / Traditional Chinese (zh-TW)</option>\r\n                </select>\r\n                </label>\r\n                <label>Stretching (Video Only)<select name=\"stretching\">\r\n                    <option value=\"auto\" selected>Auto (default)</option>\r\n                    <option value=\"responsive\">Responsive</option>\r\n                    <option value=\"fill\" selected>Fill</option>\r\n                    <option value=\"none\" selected>None (original dimensions)</option>\r\n                </select>\r\n                </label>\r\n            </form>\r\n        </section>\r\n\r\n        <br>\r\n        <div class=\"players\" id=\"player1-container\">\r\n\r\n            <h3>Video Player</h3>\r\n\r\n            <div class=\"media-wrapper\">\r\n                <video id=\"player1\" width=\"640\" height=\"360\" style=\"max-width:100%;\" preload=\"none\">\r\n                    <source src=\"http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4\" type=\"video/mp4\">\r\n                    <track srclang=\"en\" kind=\"subtitles\" type=\"text/vtt\" src=\"mediaelement.vtt\">\r\n                </video>\r\n            </div>\r\n            <br>\r\n            <div>\r\n                <label>Sources <select name=\"sources\">\r\n                    <option value=\"https://media.w3.org/2010/05/sintel/trailer.mp4\">MP4</option>\r\n                    <option value=\"https://upload.wikimedia.org/wikipedia/commons/2/22/Volcano_Lava_Sample.webm\">WebM</option>\r\n                    <option value=\"rtmp://firehose.cul.columbia.edu:1935/vod/mp4:sample.mp4\">RTMP (MP4)</option>\r\n                    <option value=\"http://www.streambox.fr/playlists/test_001/stream.m3u8\">HLS</option>\r\n                    <option value=\"http://dash.edgesuite.net/envivio/EnvivioDash3/manifest.mpd\">M(PEG)-DASH</option>\r\n                    <option value=\"http://220.243.230.204/ws.acgvideo.com/1/f6/10188762-1.flv?wsTime=1480485416&wsSecret2=44ad693c7089a8a0226bfd818c76bc29&oi=1286998248&rate=2500&wshc_tag=0&wsts_tag=583e31e9&wsid_tag=4cb608e8&wsiphost=ipdbm\">FLV</option>\r\n                    <option value=\"http://www.dailymotion.com/embed/video/x2lzodk\">DailyMotion</option>\r\n                    <option value=\"https://www.youtube.com/watch?v=twYp6W6vt2U\">YouTube</option>\r\n                    <option value=\"https://player.vimeo.com/video/108018156?title=0&amp;byline=0&amp;portrait=0&amp;badge=0\">Vimeo</option>\r\n                    <option value=\"https://www.facebook.com/johndyer/videos/10107816243681884/\">Facebook</option>\r\n                </select>\r\n                </label>\r\n            </div>\r\n            <br>\r\n            <div class=\"player-info\">\r\n                <h4>Player information</h4>\r\n                <div id=\"player1-rendername\">\r\n                    <p><strong>Source</strong>: <span class=\"src\"><a href=\"https://media.w3.org/2010/05/sintel/trailer.mp4\" target=\"_blank\">https://media.w3.org/2010/05/sintel/trailer.mp4</a></span></p>\r\n                    <p><strong>Renderer</strong>: <span class=\"renderer\">html5</span></p>\r\n                    <p class=\"error\"></p>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <br>\r\n        <hr>\r\n\r\n        <div class=\"players\" id=\"player2-container\">\r\n\r\n            <h3>Audio Player</h3>\r\n\r\n            <audio id=\"player2\" preload=\"none\" controls>\r\n                <source src=\"http://www.largesound.com/ashborytour/sound/AshboryBYU.mp3\" type=\"audio/mp3\">\r\n            </audio>\r\n            <br>\r\n            <div>\r\n                <label>Sources <select name=\"sources\">\r\n                    <option value=\"http://www.largesound.com/ashborytour/sound/AshboryBYU.mp3\">MP3</option>\r\n                    <option value=\"http://www.vorbis.com/music/Hydrate-Kenny_Beltrey.ogg\">OGG</option>\r\n                    <option value=\"rtmp://s3b78u0kbtx79q.cloudfront.net/cfx/st/mp3:fake_empire-cbr\">RTMP (MP3)</option>\r\n                    <option value=\"https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/282715465&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;visual=true\">SoundCloud</option>\r\n                </select>\r\n                </label>\r\n            </div>\r\n            <br>\r\n            <div class=\"player-info\">\r\n                <h4>Player information</h4>\r\n                <div id=\"player2-rendername\">\r\n                    <p><strong>Source</strong>: <span class=\"src\"><a href=\"http://www.largesound.com/ashborytour/sound/AshboryBYU.mp3\" target=\"_blank\">http://www.largesound.com/ashborytour/sound/AshboryBYU.mp3</a></span></p>\r\n                    <p><strong>Renderer</strong>: <span class=\"renderer\">html5</span></p>\r\n                    <p class=\"error\"></p>\r\n                </div>\r\n            </div>\r\n\r\n        </div>\r\n    </div>\r\n\r\n    <script>\r\n\r\n        function getQueryStringValue (key) {\r\n            return decodeURIComponent(window.location.search.replace(new RegExp(\"^(?:.*[&\\\\?]\" + encodeURIComponent(key).replace(/[\\.\\+\\*]/g, \"\\\\$&\") + \"(?:\\\\=([^&]*))?)?.*$\", \"i\"), \"$1\"));\r\n        }\r\n\r\n        // borrowed from https://gist.github.com/niyazpk/f8ac616f181f6042d1e0\r\n        function updateUrlParameter (uri, key, value) {\r\n            // remove the hash part before operating on the uri\r\n            var\r\n                i = uri.indexOf('#'),\r\n                hash = i === -1 ? '' : uri.substr(i)\r\n                ;\r\n\r\n            uri = i === -1 ? uri : uri.substr(0, i);\r\n\r\n            var\r\n                re = new RegExp(\"([?&])\" + key + \"=.*?(&|$)\", \"i\"),\r\n                separator = uri.indexOf('?') !== -1 ? \"&\" : \"?\"\r\n                ;\r\n\r\n            if (!value) {\r\n                // remove key-value pair if value is empty\r\n                uri = uri.replace(new RegExp(\"([?&]?)\" + key + \"=[^&]*\", \"i\"), '');\r\n\r\n                if (uri.slice(-1) === '?') {\r\n                    uri = uri.slice(0, -1);\r\n                }\r\n                // replace first occurrence of & by ? if no ? is present\r\n\r\n                if (uri.indexOf('?') === -1) {\r\n                    uri = uri.replace(/&/, '?');\r\n                }\r\n\r\n            } else if (uri.match(re)) {\r\n                uri = uri.replace(re, '$1' + key + \"=\" + value + '$2');\r\n            } else {\r\n                uri = uri + separator + key + \"=\" + value;\r\n            }\r\n            return uri + hash;\r\n        }\r\n\r\n        var\r\n            lang = getQueryStringValue('lang') || 'en',\r\n            stretching = getQueryStringValue('stretching') || 'auto'\r\n            ;\r\n\r\n        mejs.i18n.locale.language = lang;\r\n\r\n        $('select[name=lang]').on('change', function () {\r\n            window.location.href = updateUrlParameter(window.location.href, 'lang', $(this).val());\r\n        }).val(lang);\r\n\r\n        $('select[name=stretching]').on('change', function () {\r\n            window.location.href = updateUrlParameter(window.location.href, 'stretching', $(this).val());\r\n\r\n        }).val(stretching);\r\n\r\n        $('select[name=sources]').on('change', function() {\r\n            var\r\n                _this = $(this),\r\n\t\t        media = _this.closest('.players').find('.media-wrapper').children('div:first').attr('id'),\r\n                player = mejs.players[media];\r\n\r\n            player.setSrc(_this.val().replace('&amp;', '&'));\r\n            player.load();\r\n\r\n            var renderer = $('#' + player.media.id + '-rendername');\r\n            renderer.find('.src').html('<a href=\"' + _this.val() +'\" target=\"_blank\">' + _this.val() + '</a>')\r\n                .end()\r\n                .find('.renderer').html(player.media.rendererName)\r\n                .end()\r\n                .find('.error').html('')\r\n            ;\r\n\r\n        });\r\n\r\n        $('video, audio').mediaelementplayer({\r\n            stretching: stretching,\r\n            pluginPath: '../build/',\r\n            markers: [2.5, 10, 35, 40.2],\r\n            features: ['playpause', 'current', 'progress', 'duration', 'volume', 'speed', 'tracks', 'skipback', 'jumpforward', 'markers', 'fullscreen'],\r\n            success: function (media) {\r\n\r\n                mejs.i18n.locale.language = mejs.i18n.getLanguage();\r\n                $(media).closest('.mejs-container').attr('lang', mejs.i18n.getLanguage());\r\n\r\n                var renderer = $('#' + media.id + '-rendername');\r\n\r\n                media.addEventListener('loadedmetadata', function (e) {\r\n                    var src = media.originalNode.getAttribute('src').replace('&amp;', '&');\r\n                    if (src !== null && src !== undefined) {\r\n                        renderer.find('.src').html('<a href=\"' + src +'\" target=\"_blank\">' + src + '</a>')\r\n                            .end()\r\n                            .find('.renderer').html(media.rendererName)\r\n                            .end()\r\n                            .find('.error').html('')\r\n                        ;\r\n                    }\r\n                }, false);\r\n\r\n                media.addEventListener('error', function (e) {\r\n                    renderer.find('.error').html('<strong>Error</strong>: ' + e.message);\r\n                }, false);\r\n            }\r\n        });\r\n\r\n    </script>\r\n</body>\r\n</html>\r\n```\r\n"}}
{"actor":{"display_login":"ron666"}}