diff --git a/src/components/htmlvideoplayer/plugin.js b/src/components/htmlvideoplayer/plugin.js
index f26d2334e..a1e51b44f 100644
--- a/src/components/htmlvideoplayer/plugin.js
+++ b/src/components/htmlvideoplayer/plugin.js
@@ -842,7 +842,6 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
function onNavigatedToOsd() {
var dlg = videoDialog;
if (dlg) {
- dlg.classList.remove('videoPlayerContainer-withBackdrop');
dlg.classList.remove('videoPlayerContainer-onTop');
onStartedAndNavigatedToOsd();
@@ -879,7 +878,6 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
} else {
appRouter.setTransparency('backdrop');
- videoDialog.classList.remove('videoPlayerContainer-withBackdrop');
videoDialog.classList.remove('videoPlayerContainer-onTop');
onStartedAndNavigatedToOsd();
@@ -1296,12 +1294,6 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
function createMediaElement(options) {
- if (browser.tv || browser.iOS || browser.mobile) {
- // too slow
- // also on iOS, the backdrop image doesn't look right
- // on android mobile, it works, but can be slow to have the video surface fully cover the backdrop
- options.backdropUrl = null;
- }
return new Promise(function (resolve, reject) {
var dlg = document.querySelector('.videoPlayerContainer');
@@ -1316,11 +1308,6 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
dlg.classList.add('videoPlayerContainer');
- if (options.backdropUrl) {
- dlg.classList.add('videoPlayerContainer-withBackdrop');
- dlg.style.backgroundImage = "url('" + options.backdropUrl + "')";
- }
-
if (options.fullscreen) {
dlg.classList.add('videoPlayerContainer-onTop');
}
@@ -1354,6 +1341,9 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
videoElement.addEventListener('play', onPlay);
videoElement.addEventListener('click', onClick);
videoElement.addEventListener('dblclick', onDblClick);
+ if (options.backdropUrl) {
+ videoElement.poster = options.backdropUrl;
+ }
document.body.insertBefore(dlg, document.body.firstChild);
videoDialog = dlg;
@@ -1378,11 +1368,6 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
}
});
} else {
- if (options.backdropUrl) {
- dlg.classList.add('videoPlayerContainer-withBackdrop');
- dlg.style.backgroundImage = "url('" + options.backdropUrl + "')";
- }
-
resolve(dlg.querySelector('video'));
}
});
diff --git a/src/components/htmlvideoplayer/style.css b/src/components/htmlvideoplayer/style.css
index 5ecf4af66..b83a7816f 100644
--- a/src/components/htmlvideoplayer/style.css
+++ b/src/components/htmlvideoplayer/style.css
@@ -6,20 +6,9 @@
right: 0;
display: flex;
align-items: center;
-}
-
-.videoPlayerContainer:not(.videoPlayerContainer-withBackdrop) {
background: #000 !important;
}
-.videoPlayerContainer-withBackdrop {
- background-repeat: no-repeat;
- background-position: center center;
- background-size: cover;
- background-attachment: fixed;
- background-color: #000;
-}
-
.videoPlayerContainer-onTop {
z-index: 1000;
}