diff --git a/templates/macros.html b/templates/macros.html
index b6ad23d93e34f9d494bb61721689ed5d51460c85..7391563ef2f2c307355c6e9279350d7d308d7f30 100644
--- a/templates/macros.html
+++ b/templates/macros.html
@@ -42,12 +42,16 @@
 {% endmacro %}
 
 {% macro player(lecture, videos) %}
-<video id="videoplayer" class="video-js vjs-default-skin vjs-16-9 vjs-big-play-centered" width="640" height="320" controls  data-setup='{ "plugins" : {"videoJsResolutionSwitcher": { "ui": true, "default": "720p", "dynamicLabel": true } }, "customControlsOnMobile": true, "playbackRates": [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 2.25, 2.5, 2.75, 3, 3.25, 3.5, 3.75, 4] }'>
+<video id="videoplayer" style="width: 100%" class="video-js vjs-default-skin vjs-big-play-centered" width="640" height="320" controls  data-setup='{ "plugins" : {"videoJsResolutionSwitcher": { "ui": true, "default": "720p", "dynamicLabel": true } }, "customControlsOnMobile": true, "playbackRates": [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 2.25, 2.5, 2.75, 3, 3.25, 3.5, 3.75, 4] }'>
 	{% for v in videos|sort(attribute='player_prio', reverse=True) %}
 		<source type="video/mp4" src="{{ config.VIDEOPREFIX }}/{{ v.path }}" label="{{ v.format_description }}"/>
 	{% endfor %}
 	<track srclang="en" kind="chapters" src="{{ url_for('chapters',lectureid=lecture.id) }}" />
 </video>
+<script>
+$('#videoplayer').addClass("vjs-16-9");
+$('#videoplayer').css("width");
+</script>
 {% endmacro %}
 
 {% macro course_list_item(course,show_semester=False) %}