diff --git a/css/_videolayout_default.scss b/css/_videolayout_default.scss
index a639caf6d..6715a98b5 100644
--- a/css/_videolayout_default.scss
+++ b/css/_videolayout_default.scss
@@ -43,13 +43,20 @@
.videocontainer {
position: relative;
text-align: center;
+
+ &__background {
+ @include topLeft();
+ width: 100%;
+ height: 100%;
+ background-color: black;
+ }
}
#remoteVideos .videocontainer {
display: none;
position: relative;
- background-color: black;
background-size: contain;
+ border: 2px solid transparent;
border-radius:1px;
margin: 0 $thumbnailVideoMargin;
}
@@ -92,9 +99,6 @@
#remoteVideos .videocontainer.videoContainerFocused,
#remoteVideos .videocontainer:hover {
cursor: hand;
- margin-right: $thumbnailVideoMargin - 2;
- margin-left: $thumbnailVideoMargin - 2;
- margin-top: -2px;
}
/**
* Focused video thumbnail.
diff --git a/index.html b/index.html
index 57c55e5a7..c29a4087e 100644
--- a/index.html
+++ b/index.html
@@ -169,6 +169,7 @@
+
diff --git a/modules/UI/UI.js b/modules/UI/UI.js
index 021a41862..925be0de5 100644
--- a/modules/UI/UI.js
+++ b/modules/UI/UI.js
@@ -819,10 +819,14 @@ UI.emitEvent = function (type, options) {
};
UI.clickOnVideo = function (videoNumber) {
- var remoteVideos = $(".videocontainer:not(#mixedstream)");
- if (remoteVideos.length > videoNumber) {
- remoteVideos[videoNumber].click();
+ let videos = $("#remoteVideos .videocontainer:not(#mixedstream)");
+ let videosLength = videos.length;
+
+ if(videosLength <= videoNumber) {
+ return;
}
+ let videoIndex = videoNumber === 0 ? 0 : videosLength - videoNumber;
+ videos[videoIndex].click();
};
//Used by torture
diff --git a/modules/UI/videolayout/RemoteVideo.js b/modules/UI/videolayout/RemoteVideo.js
index 45bdb171d..f7607cf7e 100644
--- a/modules/UI/videolayout/RemoteVideo.js
+++ b/modules/UI/videolayout/RemoteVideo.js
@@ -631,6 +631,10 @@ RemoteVideo.createContainer = function (spanId) {
container.id = spanId;
container.className = 'videocontainer videocontainer_remote';
+ let wrapper = document.createElement('div');
+ wrapper.className = 'videocontainer__background';
+ container.appendChild(wrapper);
+
let indicatorBar = document.createElement('div');
indicatorBar.className = "videocontainer__toptoolbar";
container.appendChild(indicatorBar);
diff --git a/modules/keyboardshortcut/keyboardshortcut.js b/modules/keyboardshortcut/keyboardshortcut.js
index 027378c8d..53497347a 100644
--- a/modules/keyboardshortcut/keyboardshortcut.js
+++ b/modules/keyboardshortcut/keyboardshortcut.js
@@ -83,7 +83,7 @@ var KeyboardShortcut = {
_shortcuts[key].function(e);
}
else if (!isNaN(num) && num >= 0 && num <= 9) {
- APP.UI.clickOnVideo(num + 1);
+ APP.UI.clickOnVideo(num);
}
//esc while the smileys are visible hides them
} else if (key === "ESCAPE" &&