Skip to content

Commit 2d2b0a8

Browse files
terrillterrill
committed
Fix YouTube poster issues
1 parent 4d100b7 commit 2d2b0a8

8 files changed

Lines changed: 49 additions & 18 deletions

File tree

‎build/ableplayer.dist.js‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,14 @@
103103
this.playsInline = '0';
104104
}
105105

106+
// poster (Boolean, indicating whether media element has a poster attribute)
107+
if ($(media).attr('poster')) {
108+
this.hasPoster = true;
109+
}
110+
else {
111+
this.hasPoster = false;
112+
}
113+
106114
// start-time
107115
if ($(media).data('start-time') !== undefined && $.isNumeric($(media).data('start-time'))) {
108116
this.startTime = $(media).data('start-time');
@@ -3171,10 +3179,11 @@
31713179

31723180
this.injectOffscreenHeading();
31733181

3174-
// youtube adds its own big play button
3175-
// if (this.mediaType === 'video' && this.player !== 'youtube') {
31763182
if (this.mediaType === 'video') {
3177-
if (this.iconType != 'image' && this.player !== 'youtube') {
3183+
// youtube adds its own big play button
3184+
// don't show ours *unless* video has a poster attribute
3185+
// (which obstructs the YouTube poster & big play button)
3186+
if (this.iconType != 'image' && (this.player !== 'youtube' || this.hasPoster)) {
31783187
this.injectBigPlayButton();
31793188
}
31803189

@@ -3465,7 +3474,7 @@
34653474
height = 'auto';
34663475
}
34673476

3468-
if (this.$media.attr('poster')) {
3477+
if (this.hasPoster) {
34693478
poster = this.$media.attr('poster');
34703479
this.$posterImg = $('<img>',{
34713480
'class': 'able-poster',

‎build/ableplayer.js‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,14 @@
103103
this.playsInline = '0';
104104
}
105105

106+
// poster (Boolean, indicating whether media element has a poster attribute)
107+
if ($(media).attr('poster')) {
108+
this.hasPoster = true;
109+
}
110+
else {
111+
this.hasPoster = false;
112+
}
113+
106114
// start-time
107115
if ($(media).data('start-time') !== undefined && $.isNumeric($(media).data('start-time'))) {
108116
this.startTime = $(media).data('start-time');
@@ -3171,10 +3179,11 @@
31713179

31723180
this.injectOffscreenHeading();
31733181

3174-
// youtube adds its own big play button
3175-
// if (this.mediaType === 'video' && this.player !== 'youtube') {
31763182
if (this.mediaType === 'video') {
3177-
if (this.iconType != 'image' && this.player !== 'youtube') {
3183+
// youtube adds its own big play button
3184+
// don't show ours *unless* video has a poster attribute
3185+
// (which obstructs the YouTube poster & big play button)
3186+
if (this.iconType != 'image' && (this.player !== 'youtube' || this.hasPoster)) {
31783187
this.injectBigPlayButton();
31793188
}
31803189

@@ -3465,7 +3474,7 @@
34653474
height = 'auto';
34663475
}
34673476

3468-
if (this.$media.attr('poster')) {
3477+
if (this.hasPoster) {
34693478
poster = this.$media.attr('poster');
34703479
this.$posterImg = $('<img>',{
34713480
'class': 'able-poster',

‎build/ableplayer.min.css‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎build/ableplayer.min.js‎

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "ableplayer",
3-
"version": "3.2.9",
3+
"version": "3.2.10",
44
"description": "fully accessible HTML5 media player",
55
"homepage": "http://ableplayer.github.io/ableplayer",
66
"bugs": "https://github.com/ableplayer/ableplayer/issues",

‎scripts/ableplayer-base.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,14 @@
103103
this.playsInline = '0';
104104
}
105105

106+
// poster (Boolean, indicating whether media element has a poster attribute)
107+
if ($(media).attr('poster')) {
108+
this.hasPoster = true;
109+
}
110+
else {
111+
this.hasPoster = false;
112+
}
113+
106114
// start-time
107115
if ($(media).data('start-time') !== undefined && $.isNumeric($(media).data('start-time'))) {
108116
this.startTime = $(media).data('start-time');

‎scripts/buildplayer.js‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -37,10 +37,11 @@
3737

3838
this.injectOffscreenHeading();
3939

40-
// youtube adds its own big play button
41-
// if (this.mediaType === 'video' && this.player !== 'youtube') {
4240
if (this.mediaType === 'video') {
43-
if (this.iconType != 'image' && this.player !== 'youtube') {
41+
// youtube adds its own big play button
42+
// don't show ours *unless* video has a poster attribute
43+
// (which obstructs the YouTube poster & big play button)
44+
if (this.iconType != 'image' && (this.player !== 'youtube' || this.hasPoster)) {
4445
this.injectBigPlayButton();
4546
}
4647

@@ -331,7 +332,7 @@
331332
height = 'auto';
332333
}
333334

334-
if (this.$media.attr('poster')) {
335+
if (this.hasPoster) {
335336
poster = this.$media.attr('poster');
336337
this.$posterImg = $('<img>',{
337338
'class': 'able-poster',

‎styles/ableplayer.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,10 @@
9494
position: absolute;
9595
top: 0;
9696
left: 0;
97+
width: 100%;
98+
}
99+
.able .able-vidcap-container {
100+
overflow: hidden;
97101
}
98102

99103
/*

0 commit comments

Comments
 (0)