Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
TYPO3
sg_youtube
Commits
555a715e
Commit
555a715e
authored
Nov 11, 2021
by
Michael Kessler
Browse files
[TASK] Add disable lightbox functionality
parent
97f27e4b
Changes
1
Hide whitespace changes
Inline
Side-by-side
Resources/Public/JavaScript/sgYoutubeLightbox.js
View file @
555a715e
...
...
@@ -8,7 +8,69 @@ export default class SgYoutubeLightbox {
* Initializes the LightboxManager with the necessary parameters.
*/
constructor
()
{
const
youtubeItems
=
document
.
querySelectorAll
(
'
.sg-youtube-item
'
);
const
isMobile
=
window
.
matchMedia
(
'
(max-width: 679px)
'
).
matches
;
youtubeItems
.
forEach
((
item
)
=>
{
if
(
item
.
dataset
.
disableLightboxMobile
===
'
1
'
&&
isMobile
||
item
.
dataset
.
disableLightbox
===
'
1
'
&&
!
isMobile
)
{
item
.
classList
.
remove
(
'
sg-youtube-item
'
);
item
.
addEventListener
(
'
click
'
,
this
.
disableLightbox
.
bind
(
this
));
}
});
LightboxManager
.
init
({
type
:
'
video
'
,
glightbox
:
{
selector
:
'
.sg-youtube-item
'
}});
}
/**
* Replace the image with an iframe
*
* @param event
*/
disableLightbox
(
event
)
{
event
.
preventDefault
();
const
item
=
event
.
currentTarget
;
item
.
classList
.
add
(
'
no-lightbox
'
);
const
videoId
=
this
.
getVideoIdFromUrl
(
item
.
href
);
const
videoImage
=
item
.
querySelector
(
'
.sg-video__image
'
);
const
height
=
videoImage
.
offsetHeight
;
const
width
=
videoImage
.
offsetWidth
;
const
iframe
=
document
.
createElement
(
'
iframe
'
);
iframe
.
width
=
width
;
iframe
.
height
=
height
;
iframe
.
style
.
border
=
'
none
'
;
iframe
.
allowFullscreen
=
true
;
iframe
.
allow
=
'
accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture
'
;
iframe
.
src
=
`https://www.youtube-nocookie.com/embed/
${
videoId
}
`
;
item
.
replaceChild
(
iframe
,
videoImage
);
}
/**
* Prepares the given url, or returns null.
*
* @param {string} url
* @return {string|null}
*/
getVideoIdFromUrl
(
url
)
{
let
matches
=
url
.
match
(
/watch
\?
v=
(
.*
)
&list=
(
.*
)
/
);
if
(
!
matches
)
{
// check if the list parameter is missing
matches
=
url
.
match
(
/watch
\?
v=
([^
?&
]
*
)
/
);
if
(
!
matches
)
{
return
null
;
}
}
let
[,
videoString
]
=
matches
,
queryParameterSeparator
=
'
?
'
;
if
(
matches
[
2
])
{
videoString
+=
'
?list=
'
+
matches
[
2
];
queryParameterSeparator
=
'
&
'
;
}
return
videoString
+
queryParameterSeparator
+
'
autoplay=1&rel=0
'
;
}
}
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment