Html 5 video cc button
HTML
<video [src]='videoURL' controls #videoPlayer (ended)="onVideoEnd($event)"
[style.maxHeight]="screen.data.height">
<track label="English subtitles" kind="subtitles" srclang="en"
[src]="screen.data.ccs"/>
</video>
CSS
video {
width: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Would anyone be able to shed some light as to why the Captions and Download button is positioned where it is in the screenshot above, It was positioned correctly so i'm wondering, did google chrome update which has caused something or am i just going mental haha.
I have so far looked into shadow-doom elements but with no success in returning the buttons to their original position.
I'm also interested if others have had a similar problem and if any workarounds/solutions have been found, i am for the purpose of my project not allowed to create any custom controls for the video player so if that was a possible solution it is out :(
Any help will be greatly appreciated, thanks to everyone in advance. :)
Browser is chrome.
html css angular
google-chrome html5-video edited Nov 13 '18 at 0:19
Zze
9,53553667
asked Sep 18 '18 at 22:26
Dylan Anlezark
18014
add a comment |
HTML
<video [src]='videoURL' controls #videoPlayer (ended)="onVideoEnd($event)"
[style.maxHeight]="screen.data.height">
<track label="English subtitles" kind="subtitles" srclang="en"
[src]="screen.data.ccs"/>
</video>
CSS
video {
width: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Would anyone be able to shed some light as to why the Captions and Download button is positioned where it is in the screenshot above, It was positioned correctly so i'm wondering, did google chrome update which has caused something or am i just going mental haha.
I have so far looked into shadow-doom elements but with no success in returning the buttons to their original position.
I'm also interested if others have had a similar problem and if any workarounds/solutions have been found, i am for the purpose of my project not allowed to create any custom controls for the video player so if that was a possible solution it is out :(
Any help will be greatly appreciated, thanks to everyone in advance. :)
Browser is chrome.
html css angular
google-chrome html5-video edited Nov 13 '18 at 0:19
Zze
9,53553667
asked Sep 18 '18 at 22:26
Dylan Anlezark
18014
add a comment |
HTML
<video [src]='videoURL' controls #videoPlayer (ended)="onVideoEnd($event)"
[style.maxHeight]="screen.data.height">
<track label="English subtitles" kind="subtitles" srclang="en"
[src]="screen.data.ccs"/>
</video>
CSS
video {
width: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Would anyone be able to shed some light as to why the Captions and Download button is positioned where it is in the screenshot above, It was positioned correctly so i'm wondering, did google chrome update which has caused something or am i just going mental haha.
I have so far looked into shadow-doom elements but with no success in returning the buttons to their original position.
I'm also interested if others have had a similar problem and if any workarounds/solutions have been found, i am for the purpose of my project not allowed to create any custom controls for the video player so if that was a possible solution it is out :(
Any help will be greatly appreciated, thanks to everyone in advance. :)
Browser is chrome.
html css angular
google-chrome html5-video edited Nov 13 '18 at 0:19
Zze
9,53553667
asked Sep 18 '18 at 22:26
Dylan Anlezark
18014
HTML
<video [src]='videoURL' controls #videoPlayer (ended)="onVideoEnd($event)"
[style.maxHeight]="screen.data.height">
<track label="English subtitles" kind="subtitles" srclang="en"
[src]="screen.data.ccs"/>
</video>
CSS
video {
width: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Would anyone be able to shed some light as to why the Captions and Download button is positioned where it is in the screenshot above, It was positioned correctly so i'm wondering, did google chrome update which has caused something or am i just going mental haha.
I have so far looked into shadow-doom elements but with no success in returning the buttons to their original position.
I'm also interested if others have had a similar problem and if any workarounds/solutions have been found, i am for the purpose of my project not allowed to create any custom controls for the video player so if that was a possible solution it is out :(
Any help will be greatly appreciated, thanks to everyone in advance. :)
Browser is chrome.
html css angular
google-chrome html5-video html css angular
google-chrome html5-video edited Nov 13 '18 at 0:19
Zze
9,53553667
asked Sep 18 '18 at 22:26
Dylan Anlezark
18014
edited Nov 13 '18 at 0:19
Zze
9,53553667
asked Sep 18 '18 at 22:26
Dylan Anlezark
18014
edited Nov 13 '18 at 0:19
Zze
9,53553667
edited Nov 13 '18 at 0:19
Zze
9,53553667
edited Nov 13 '18 at 0:19
Zze
9,53553667
9,53553667
asked Sep 18 '18 at 22:26
Dylan Anlezark
18014
asked Sep 18 '18 at 22:26
Dylan Anlezark
18014
asked Sep 18 '18 at 22:26
Dylan Anlezark
18014
18014
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
So i found a solution to this for anyone who reads this post in the future and has a similar issue:
The issue: the Video and a parent div was being positioned using transform: translate(-50%, -50%);
This for some reason did did not effect the video pseudo elements of the video specifically the extras menu
The solution: remove the above line of code from the parent div and replace with
position: absolute;
top: 50%;
left: 50%;
and position the video in a similar way instead of using the transform translate
answered Nov 21 '18 at 1:56
Dylan Anlezark
18014
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f52395409%2fhtml-5-video-cc-button%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
So i found a solution to this for anyone who reads this post in the future and has a similar issue:
The issue: the Video and a parent div was being positioned using transform: translate(-50%, -50%);
This for some reason did did not effect the video pseudo elements of the video specifically the extras menu
The solution: remove the above line of code from the parent div and replace with
position: absolute;
top: 50%;
left: 50%;
and position the video in a similar way instead of using the transform translate
answered Nov 21 '18 at 1:56
Dylan Anlezark
18014
add a comment |
So i found a solution to this for anyone who reads this post in the future and has a similar issue:
The issue: the Video and a parent div was being positioned using transform: translate(-50%, -50%);
This for some reason did did not effect the video pseudo elements of the video specifically the extras menu
The solution: remove the above line of code from the parent div and replace with
position: absolute;
top: 50%;
left: 50%;
and position the video in a similar way instead of using the transform translate
answered Nov 21 '18 at 1:56
Dylan Anlezark
18014
add a comment |
So i found a solution to this for anyone who reads this post in the future and has a similar issue:
The issue: the Video and a parent div was being positioned using transform: translate(-50%, -50%);
This for some reason did did not effect the video pseudo elements of the video specifically the extras menu
The solution: remove the above line of code from the parent div and replace with
position: absolute;
top: 50%;
left: 50%;
and position the video in a similar way instead of using the transform translate
answered Nov 21 '18 at 1:56
Dylan Anlezark
18014
So i found a solution to this for anyone who reads this post in the future and has a similar issue:
The issue: the Video and a parent div was being positioned using transform: translate(-50%, -50%);
This for some reason did did not effect the video pseudo elements of the video specifically the extras menu
The solution: remove the above line of code from the parent div and replace with
position: absolute;
top: 50%;
left: 50%;
and position the video in a similar way instead of using the transform translate
answered Nov 21 '18 at 1:56
Dylan Anlezark
18014
edited Nov 21 '18 at 2:01
answered Nov 21 '18 at 1:56
Dylan Anlezark
18014
answered Nov 21 '18 at 1:56
Dylan Anlezark
18014
answered Nov 21 '18 at 1:56
Dylan Anlezark
18014
18014
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f52395409%2fhtml-5-video-cc-button%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
