diff --git a/templates/streaming.html b/templates/streaming.html
index 3c65b620901c09ad9951bd0c02e39df9250fa051..1d1ce01a4e6fcc68ef01690e135d1dafcacc76b4 100644
--- a/templates/streaming.html
+++ b/templates/streaming.html
@@ -21,7 +21,7 @@
 				<div class="row">
 					<div style="background-image: url('{{ config.VIDEOPREFIX }}/thumbnail/s_{{ source.id }}.jpg')" class="col-sm-2 col-xs-12 thumbnailimg">
 					{% if source.clientid %}
-						<a href="#" data-toggle="modal" data-target="#preview-player" data-srcname="{{ source.name }}" data-srcid="{{ source.id }}">
+						<a href="#" data-toggle="modal" data-target="#preview-player" data-srcname="{{ source.name }}" data-srckey="{{ source.key }}">
 							<span class="glyphicon glyphicon-play-circle playpreviewbtn"></span>
 						</a>
 					{% endif %}
@@ -77,7 +77,7 @@
 $('#preview-player').on('show.bs.modal', function (e) {
 	var btn = $(e.relatedTarget);
 	$(this).find('.modal-title').text('Vorschau von '+btn.data('srcname'));
-	$(this).find('.modal-body').html('<video id="previewplayer" style="width: 100%" class="video-js vjs-default-skin vjs-big-play-centered" width="640" height="320" controls><source type="application/x-mpegURL" src="{{config.VIDEOPREFIX}}/hls/preview/'+btn.data('srcid')+'.m3u8"/></video>');
+	$(this).find('.modal-body').html('<video id="previewplayer" style="width: 100%" class="video-js vjs-default-skin vjs-big-play-centered" width="640" height="320" controls><source type="application/x-mpegURL" src="{{config.VIDEOPREFIX}}/hls/preview/'+btn.data('srckey')+'.m3u8"/></video>');
 	var player = videojs('previewplayer');
 	player.play();
 });