background top icon
background center wave icon
background filled rhombus icon
background two lines icon
background stroke rhombus icon
header logo icon

Download "Marquee-like Content Scrolling (HTML & CSS)"

input logo icon
"videoThumbnail Marquee-like Content Scrolling (HTML & CSS)
Table of contents
|

Table of contents

1:19
Marquee Tag
3:26
Css
4:12
Styling the Marquee Element
5:29
Styling the Marquee Content Element
9:54
A Continuous Flow of Marquee Elements
12:24
Linear Gradient
17:12
Root Selector
25:54
Set the Marquee Elements Custom Property
28:23
Use Cases
28:27
Logo Slider
29:16
Scrolling Text
30:45
Add Images as Marquee Content
Similar videos from our catalog
|

Similar videos from our catalog

Video tags
|

Video tags

marquee
marquee effect
marquee effect css
marquee effect in html
marquee css
scrolling marquee
css animation
marquee animation
css marquee effect
text animation
content scrolling
content scroller
marquee-like content scrolling
scrolling banner
infinite carousel
logo slider
logo slider html css
logo slider css
scrolling content carousel
logo ticker
how-to
html
css
javascript
front-end
ui
ux
tutorial
web tutorials
web development
coding
coding journey
Subtitles
|

Subtitles

subtitles menu arrow
  • ruRussian
Download
00:00:00
hey what's up guys hope you are doing
00:00:01
well today we are creating this marque
00:00:04
like content scrolling effect with HTML
00:00:09
and CSS this is a nice way to display
00:00:11
some kind of information to the user for
00:00:14
example here is some text could be news
00:00:17
special offers stock prices or an
00:00:20
exchange rates etc here are some images
00:00:23
and here is a loco slider I hope you
00:00:27
will get some value out of this video
00:00:29
don't forget to Like share subscribe and
00:00:32
without further ado let's go this is our
00:00:43
starting point I've created two files
00:00:46
they index dot HTML and style dot CSS
00:00:49
files in the index dot HTML file I typed
00:00:52
some basic html5 boilerplate code
00:00:56
inserted the title my key like content
00:01:00
scrolling and linked the document to the
00:01:03
external stylesheet the style dot CSS
00:01:06
file which is currently empty and we can
00:01:10
now proceed to defining the content for
00:01:13
the body but before proceeding to the
00:01:15
actual implementation I would like to
00:01:17
mention the existence of the marquee tag
00:01:20
which can be used to insert a scrolling
00:01:24
area of text and let's add behavior to
00:01:27
scroll which is the default by the way
00:01:30
and direction to left which is also the
00:01:33
default and let's insert some text here
00:01:37
lo word I know the original
00:01:43
and let's save and open the project in
00:01:47
the browser I'll be using the live
00:01:49
server Visual Studio code extension
00:01:56
indeed we can see the text scrolling
00:01:59
from from right to left and this will be
00:02:03
repeated infinitely in a cyclical manner
00:02:09
so theoretically we could use the Mikey
00:02:12
element as a starting point for our
00:02:14
project right wrong because the Marquis
00:02:19
element is obsolete although it may
00:02:23
still work in some browsers its use is
00:02:27
discouraged since it could be removed at
00:02:29
any time try to avoid using it
00:02:34
okay so let's forget about using the
00:02:37
HTML my key element and will later use
00:02:41
CSS in order to implement the desired
00:02:44
behavior so let's create our custom
00:02:48
Marquis element this will be a div
00:02:50
element with a class Marquis
00:02:54
which will contain a ul element with a
00:02:58
class marquee content
00:03:03
so the my key element will be the static
00:03:07
the fixed part and this will be the
00:03:10
moving part and let's add a few list
00:03:13
items let's say 9
00:03:20
and that's all with the HTML markup
00:03:25
let's proceed to CSS
00:03:33
for starters I will just paste some
00:03:36
basic styling in order to save some time
00:03:38
just importing the Montserrat phone
00:03:41
family resetting margin and padding to
00:03:44
zero and box sizing to border box for
00:03:47
all elements and for the body setting
00:03:51
phone family background color and color
00:03:53
and finally using flexbox in order to
00:03:57
center the content not necessarily
00:04:00
something I would do in a real life
00:04:01
project this is just for presentational
00:04:03
purposes I think it looks better
00:04:05
centered so let's save
00:04:10
okay and let's proceed to styling the
00:04:13
marquee element
00:04:17
background-color and let's use this
00:04:20
color very dark gray almost black and
00:04:24
color
00:04:27
let's use this color very light gray
00:04:30
almost white
00:04:33
nice butt or now let's use some other
00:04:37
color so that everything is visible
00:04:39
since this color is the same as a body
00:04:42
background color so let's use tomato for
00:04:45
some reason I like this color
00:04:48
okay and let's set with my key element
00:04:54
to 80% of viewport width
00:05:00
and height
00:05:03
- 20 % of viewport height
00:05:10
we'll also want to hide the content
00:05:13
which extends beyond the marquee area
00:05:15
and for this purpose we'll make use of
00:05:17
the overflow property and set it to
00:05:20
hidden however for now let's keep
00:05:23
everything visible in order to have the
00:05:26
full picture and now let's proceed to
00:05:29
styling the marquee content element
00:05:36
let's start by setting least style to
00:05:39
none
00:05:42
let's set height to 100% of its parent
00:05:48
element so it will occupy the entire
00:05:50
height of the marquee element and let's
00:05:54
set display two legs in order to display
00:06:01
its content in a row
00:06:05
now this will be the moving part so in a
00:06:08
while we define an animation or this
00:06:12
element however let's first define the
00:06:16
styling for individual list items
00:06:24
or starters let's add a border around
00:06:27
each Ally just in order to be able to
00:06:30
see the area it occupies and let's use
00:06:34
the color teal
00:06:39
and now let's set with 220 viewport
00:06:43
width recall that the width for the
00:06:47
marquee element is 80 viewport width so
00:06:50
we expect to have or list items within
00:06:54
the marquee area
00:06:58
not exactly what we wanted and that's
00:07:00
because the default value for the Flex
00:07:03
shrink factor is one in order for the
00:07:07
Flex items to shrink in order to fit
00:07:11
into their Flex container so in order to
00:07:15
prevent the elements from shrinking
00:07:17
let's set this value to zero
00:07:22
very nice and you are starting to see
00:07:25
where we are getting at with this
00:07:27
recall that the part beyond the marquee
00:07:30
boundaries will be hidden
00:07:33
and once again let's use flexbox to
00:07:37
center the content
00:07:40
and let's set font size to five REM
00:07:49
and let's also set white space to nowrap
00:07:56
just in order to ensure that text will
00:07:58
never arrive to the next line unless of
00:08:01
course a br tag is encountered
00:08:06
and now let's define the animation for
00:08:09
the market content let's name the
00:08:12
animation scrolling and let's set
00:08:16
animation duration to ten seconds
00:08:18
animation timing function to linear and
00:08:21
animation duration count to infinite
00:08:26
and let's specify the animation
00:08:36
now this could be our starting point or
00:08:40
we could start from the right edge let's
00:08:44
do the latter so in this case we would
00:08:47
like to move the marquee content to the
00:08:50
right by 80 you port width
00:08:58
and eventually we want to move the
00:09:04
marquee content to the left by nine
00:09:10
times 20 you port width so by 180
00:09:15
viewport width so let's save and see the
00:09:19
result
00:09:25
nice and let's uncomment the
00:09:28
overflow:hidden here let's also change
00:09:31
the color
00:09:34
and let's also remove the porter
00:09:43
you
00:09:51
nice but what if we wanted to have a
00:09:54
continuous flow of marquee elements so
00:09:57
for example when nine is here to also
00:10:01
have numbers one two three displayed
00:10:05
well in this case we should duplicate
00:10:08
elements here but how many elements well
00:10:12
at least my key width in this case
00:10:15
eighty viewport width divided by each
00:10:19
elements width which is 20 viewport
00:10:23
width so at we should repeat at least
00:10:26
four elements
00:10:30
now if we duplicated more than four
00:10:34
elements then we wouldn't have any
00:10:36
problem since animation would restart
00:10:39
each time simply ignoring the extra
00:10:41
elements however if we duplicated less
00:10:44
than four elements then there would be
00:10:48
some empty space at the end of each
00:10:51
animation repetition if we don't want to
00:10:54
duplicate elements we can use JavaScript
00:10:57
to automate this process and in fact we
00:11:00
will do this towards the end of this
00:11:02
video and now just in order to better
00:11:05
see what's happening let's add
00:11:07
background color to be duplicated
00:11:10
elements
00:11:14
so let's save and see the result
00:11:23
here are the duplicated elements
00:11:27
okay but in order to have a continuous
00:11:30
flow rather than starting the animation
00:11:32
from the right edge let's start from
00:11:35
zero
00:11:42
let's save and see the result
00:11:51
here are the duplicated elements
00:11:56
and as soon as animation restarts
00:11:59
duplicated elements are replaced by the
00:12:01
original elements instantly and
00:12:04
animation continuous nice
00:12:09
okay let's remove background color from
00:12:12
duplicated elements
00:12:18
now we could make the entrance and exit
00:12:22
of elements a bit more gradual by adding
00:12:25
linear gradient to the left and right
00:12:28
edges of my key element for this purpose
00:12:32
we could create two separate elements
00:12:35
and place them to the left and right
00:12:38
edges or alternatively we could make use
00:12:42
of the before-and-after pseudo elements
00:12:45
over the Marquis element let's take the
00:12:48
latter approach
00:12:51
and let's paste this part and quickly go
00:12:55
through it so we are absolutely
00:12:57
positioning the before and after pseudo
00:13:01
elements relative to the marquee element
00:13:04
so let's add position:relative here we
00:13:09
are placing the before pseudo element to
00:13:12
the left edge by setting top and left
00:13:16
position to 0 and height to 100% of the
00:13:20
marquee element and similarly we are
00:13:23
placing the after pseudo element to the
00:13:26
right edge
00:13:28
with is set to 10 REM content is empty
00:13:33
since we are only interested in setting
00:13:36
width and height for the elements and
00:13:38
therefore for linear gradient which is
00:13:42
actually considered to be background
00:13:43
image and finally we said Z index to 1
00:13:48
just in order to make sure that these
00:13:51
elements are placed on top of the
00:13:54
marquee element
00:13:57
now for the left element we set
00:14:00
background to linear gradient with
00:14:02
direction to right starting from this
00:14:05
color at 0% which is the left edge and
00:14:10
ending to transparent at 100% which is 1
00:14:15
which is 10 REM from the left edge and
00:14:20
similarly for the right element just
00:14:24
changing direction from right to left if
00:14:29
you are interested in a more detailed
00:14:31
explanation of linear gradient a while
00:14:35
ago I've created a video on this topic
00:14:38
so feel free to check it out I will also
00:14:41
include a link in the description ok
00:14:45
let's save and see the result
00:14:49
indeed now we can see the gradual
00:14:51
entrance and exit of elements
00:14:56
nice we could also post the animation
00:15:00
when Mouse is over the marquee content
00:15:04
so let's demonstrate this
00:15:10
my key content over and in this case we
00:15:14
want to set animation play state
00:15:19
to post
00:15:22
you
00:15:24
and let's test
00:15:29
indeed when mouse is over the marquee
00:15:33
content animation is post nice but let's
00:15:40
comment this out for now
00:15:45
okay we are done with the basics so you
00:15:48
can now take this core concept and
00:15:50
create and style the marquee elements
00:15:52
you want however why not make our code a
00:15:55
bit more maintainable for example here
00:15:58
instead of manually making the
00:16:00
calculation why not just use the calc
00:16:03
CSS function so let's do this
00:16:07
so we want to move to the left
00:16:12
by 20 you put width times 9
00:16:18
nice but what if we changed the number
00:16:23
of elements here well in this case we
00:16:26
should return to our CSS find this point
00:16:29
here and change the number or
00:16:32
alternatively we could define CSS
00:16:35
variables at the top of our page and use
00:16:39
them now before proceeding I should
00:16:42
mention that by using CSS variables or
00:16:45
custom properties we will lose a small
00:16:47
percentage of browser support since up
00:16:51
to 21st of may 2019 browser support for
00:16:55
CSS variables covers around 92% of
00:16:59
global usage so this is a decision you
00:17:02
have to make now let's declare CSS
00:17:06
variables within the root selector so
00:17:10
they will have a global scope the root
00:17:13
selector is similar to the HTML selector
00:17:17
however it has a class level specificity
00:17:20
since it is a pseudo class so it
00:17:23
actually overrides the HTML selector the
00:17:27
variable name must begin with two dashes
00:17:31
and it is case sensetive or starters
00:17:34
let's declare the mark key with
00:17:40
variable and let's set it to eighty
00:17:43
viewport width
00:17:46
let's continue by declaring the Marquis
00:17:49
height
00:17:52
and let's set it to 20 viewport height
00:17:59
next let's set the number of marquise
00:18:03
elements
00:18:05
- nine so if number of my key elements
00:18:10
changed then we should manually refresh
00:18:13
the number here since there is no way of
00:18:17
counting the number of Marquis content
00:18:20
children with CSS next let's set the
00:18:25
Marquis elements displayed number and in
00:18:30
our example this number was equal to 480
00:18:34
viewport width divided by 20 which was
00:18:38
the width of an element next let's
00:18:43
calculate and store into a variable the
00:18:47
Marquis element with
00:18:50
this should be equal to the marque width
00:18:54
divided by the Marquis elements
00:18:57
displayed so calc and we have to use the
00:19:02
VAR function in order to access a CSS
00:19:05
variable
00:19:07
so it's equal to Marquis with /
00:19:15
the my key elements displayed
00:19:20
and finally let's declare the marque
00:19:25
animation duration variable
00:19:29
in our example this value was set to ten
00:19:33
seconds we could alternatively somehow
00:19:37
link this value to the number of marque
00:19:41
elements so for example let's set my key
00:19:45
animation duration to calc
00:19:51
my key element times let's say two
00:19:55
seconds
00:19:58
okay now let's replace the corresponding
00:20:01
values in the style sheet with our
00:20:05
custom properties values
00:20:15
you
00:20:48
okay I hope I didn't forget anything we
00:20:52
could even set font size for my key
00:20:55
element to be relative to Marquis height
00:21:00
for example let's set it to be equal to
00:21:07
Marquis height times
00:21:13
2/3 so it will be equal to 2/3 of marque
00:21:16
height of course in the case of a larger
00:21:20
text we would probably decrease the font
00:21:22
size ok let's save and see the result
00:21:30
seems to be working smoothly and let's
00:21:33
see the change here once it gets to four
00:21:39
nice now for smaller screens I think we
00:21:46
could add some very basic responsiveness
00:21:49
just in order to make it look a bit
00:21:51
better
00:21:57
I will just paste this part I will of
00:22:00
course include a link in the description
00:22:02
to the entire project so for screens
00:22:04
with 600 pixels or less with these
00:22:08
styling rules apply
00:22:11
so we reset route font size to 12 pixels
00:22:15
this effect the REM units recall that R
00:22:19
stands for route we also reset some CSS
00:22:25
variable so custom properties values so
00:22:27
we set Marquis width to 100% of viewport
00:22:31
width so that we will utilize the entire
00:22:33
width in case of smaller screens we also
00:22:36
reset Marquis height to the extremely
00:22:38
poor height and mark elements displayed
00:22:40
to 3 instead of 4 so that will have a
00:22:43
bit more space for each element so
00:22:46
notice how easy it is to maintain and
00:22:49
manipulate CSS styling when using CSS
00:22:52
variables okay and finally we reduce the
00:22:56
linear gradient width to the left and
00:22:59
right edges of the Marquis element so
00:23:02
let's save and see the result
00:23:11
looks better I think
00:23:14
okay
00:23:17
now instead of manually duplicating
00:23:20
elements here
00:23:23
or counting the my key elements and
00:23:26
setting the number here we could take
00:23:30
this a step further and use JavaScript
00:23:33
in order to perform these tasks so at
00:23:37
this point the scrolling animation is
00:23:40
broken since my key elements variable is
00:23:45
not defined
00:23:49
so let's first create our JavaScript
00:23:52
file and let's name it main dot Cheers
00:23:57
and let's link the javascript file to
00:24:00
the document
00:24:05
or alternatively instead of placing the
00:24:07
script at the end of the body we could
00:24:10
place it in the head using the dafair
00:24:13
attribute which indicates the browser
00:24:16
that the script is meant to be executed
00:24:18
after the document has been passed and
00:24:21
the overall execution of the script
00:24:23
actually is faster because this way the
00:24:26
script has been downloaded in parallel
00:24:29
with the HTML parsing
00:24:32
browser support for the fair utter good
00:24:35
is close to 98% okay let's move on to
00:24:39
our JavaScript file for starters let's
00:24:43
access the root element of the document
00:24:45
and store it into a variable
00:24:53
next we need to access the value of the
00:24:57
my key elements displayed custom
00:25:00
property in order to know how many
00:25:03
elements to duplicate
00:25:11
we'll make use of the get computed style
00:25:14
method which returns an object
00:25:16
containing the values of all CSS
00:25:18
properties of an element
00:25:21
and specifically we are interested in
00:25:24
getting the property value for the
00:25:28
Marquise elements displayed property
00:25:32
and finally we need to access the
00:25:35
marquee content element in order to be
00:25:38
able to append the duplicated elements
00:25:49
you
00:25:52
okay now let's set the marquee elements
00:25:57
custom property over the root element
00:26:01
so root dot style dot set property
00:26:11
my key elements is the property we want
00:26:14
to set and the value we want to set it
00:26:17
to is my key content
00:26:22
got children
00:26:25
dog leg
00:26:29
okay so now if we save we can see that
00:26:32
scrolling animation is now working but
00:26:36
we expect to have empty spaces at the
00:26:39
end of the animation since we didn't
00:26:42
duplicate elements yet here we are
00:26:49
okay
00:26:51
so let's use a for loop in order to
00:26:54
clone my key elements displayed elements
00:26:58
and append them to marquee content
00:27:08
you
00:27:11
and let's first clone the if' child of
00:27:15
marquis content
00:27:24
and we now want to append this clone
00:27:29
element to my key content as a child
00:27:40
and that's all with JavaScript let's see
00:27:43
the result
00:27:48
nine now we expect the duplicated
00:27:51
elements here we are one two three and
00:27:54
four
00:27:58
very nice and if we inspect
00:28:02
elements let's see if they duplicated
00:28:07
elements were indeed created there we
00:28:10
are one two three and four okay
00:28:19
and we are actually done but before
00:28:22
closing the video let's quickly go
00:28:24
through a few use cases let's first turn
00:28:27
this into a logo slider for this purpose
00:28:29
I'll be using front awesome local icons
00:28:32
so let's include found awesome in our
00:28:35
project
00:28:40
and let's paste the logos we want to
00:28:42
display nice save
00:28:47
and let's just change the marquee
00:28:50
elements displayed variable to five
00:28:53
instead of four so let's save and see
00:28:56
the result
00:29:03
you
00:29:11
okay it looks nice
00:29:13
next let's display simple scrolling text
00:29:19
so only two my key elements here one
00:29:23
cells coding journey and the other one
00:29:25
says it's all about the journey let's
00:29:27
save
00:29:29
and let's display one element at a time
00:29:33
let's also increase animation duration
00:29:36
since we only have two elements now and
00:29:40
let's also make a few more styling
00:29:42
changes a reversing background color
00:29:44
with color
00:29:48
and let's also change the linear
00:29:51
gradient color here
00:29:55
okay let's save
00:30:02
nice this would probably look better on
00:30:05
top I would also read use font size and
00:30:09
if we wanted to increase the distance
00:30:12
between the two elements we could insert
00:30:17
empty elements between them for example
00:30:21
we could add analyte here
00:30:24
and one more here let's save
00:30:37
okay better I think
00:30:42
nice and finally we'll add images as
00:30:47
marquee content but let's first create a
00:30:51
new folder and name it images and let's
00:30:56
move the images in here
00:31:00
okay
00:31:03
let's taste the Mikey elements
00:31:06
containing the images
00:31:10
and now regarding the styling let's set
00:31:13
Marquis height to thirty viewport height
00:31:16
my key elements displayed two three and
00:31:19
let's make the animation a bit faster
00:31:22
multiplying by three instead of four
00:31:29
let's also reduce linear gradient width
00:31:33
to left and right edges to one REM
00:31:40
and since we are now having images let's
00:31:43
not forget to define dimensions
00:31:50
I will just set the width so that aspect
00:31:54
ratio is preserved
00:31:57
and let's also add a border around each
00:32:01
image
00:32:05
okay let's save and see the result
00:32:13
excellent okay guys let's leave it here
00:32:16
I hope you enjoyed this video and got
00:32:18
some value out of it or any questions
00:32:21
suggestions or just to say hi please use
00:32:24
the comment section below click the like
00:32:26
button if you like this video and share
00:32:28
it with anyone who might be interested
00:32:30
also don't forget to subscribe if you
00:32:33
want more till next time keep coding
00:32:35
keep improving and a joy the journey
00:32:40
take care bye

Description:

Learn how to create a Marquee-like Content Scrolling Effect with HTML and CSS. The effect is implemented from scratch, without using the HTML marquee element which is obsolete. Scrolling marquee is a nice way to display information to the user, such as news, announcements, special offers, stock prices, fx rates etc. It can also be used as an image carousel or a logo slider and in general for any type of scrolling content. Initially, the minimal HTML structure and CSS styling to achieve the effect is described. We then introduce and use CSS variables (custom properties), in order to make CSS styling easier to modify and maintain. And eventually, we use JavaScript just in order to overcome limitations of a CSS-only solution, automating a couple of tasks. Creating the marquee-like content scrolling effect from scratch, will allow you to modify it any way you want, according to your needs and imagination! Code for this Project: https://codepen.io/Coding_Journey/pen/yWjWKd Support the Channel 💙☕🙏 PayPal: https://www.paypal.com/paypalme/CodingJourney Suggested Videos: Colorful Background with linear-gradient: https://www.youtube.com/watch?v=1q6papqTEqI Font Awesome 5 Icons: https://www.youtube.com/watch?v=rXiO4bm2Zpc Typing Effect with HTML, CSS and JavaScript: https://www.youtube.com/watch?v=T4VE_6v9hFs Currency Converter with HTML, CSS and JavaScript: https://www.youtube.com/watch?v=ARBvYDNeNdM&list=PLdGqEpyfYoMCSMLcavLm4BmTiZoBnme-O Thanks for watching! For any questions, suggestions or just to say hi, please use the comment section below! Codepen: https://codepen.io/Coding_Journey/ Twitter: https://twitter.com/CodingJrney Email: [email protected] Subscribe 💖 https://www.youtube.com/channel/UCwpH4liYtBSiVXSfL8x2TyQ?sub_confirmation=1

Preparing download options

popular icon
Popular
hd icon
HD video
audio icon
Only sound
total icon
All
* — If the video is playing in a new tab, go to it, then right-click on the video and select "Save video as..."
** — Link intended for online playback in specialized players

Questions about downloading video

mobile menu iconHow can I download "Marquee-like Content Scrolling (HTML & CSS)" video?mobile menu icon

  • http://unidownloader.com/ website is the best way to download a video or a separate audio track if you want to do without installing programs and extensions.

  • The UDL Helper extension is a convenient button that is seamlessly integrated into YouTube, Instagram and OK.ru sites for fast content download.

  • UDL Client program (for Windows) is the most powerful solution that supports more than 900 websites, social networks and video hosting sites, as well as any video quality that is available in the source.

  • UDL Lite is a really convenient way to access a website from your mobile device. With its help, you can easily download videos directly to your smartphone.

mobile menu iconWhich format of "Marquee-like Content Scrolling (HTML & CSS)" video should I choose?mobile menu icon

  • The best quality formats are FullHD (1080p), 2K (1440p), 4K (2160p) and 8K (4320p). The higher the resolution of your screen, the higher the video quality should be. However, there are other factors to consider: download speed, amount of free space, and device performance during playback.

mobile menu iconWhy does my computer freeze when loading a "Marquee-like Content Scrolling (HTML & CSS)" video?mobile menu icon

  • The browser/computer should not freeze completely! If this happens, please report it with a link to the video. Sometimes videos cannot be downloaded directly in a suitable format, so we have added the ability to convert the file to the desired format. In some cases, this process may actively use computer resources.

mobile menu iconHow can I download "Marquee-like Content Scrolling (HTML & CSS)" video to my phone?mobile menu icon

  • You can download a video to your smartphone using the website or the PWA application UDL Lite. It is also possible to send a download link via QR code using the UDL Helper extension.

mobile menu iconHow can I download an audio track (music) to MP3 "Marquee-like Content Scrolling (HTML & CSS)"?mobile menu icon

  • The most convenient way is to use the UDL Client program, which supports converting video to MP3 format. In some cases, MP3 can also be downloaded through the UDL Helper extension.

mobile menu iconHow can I save a frame from a video "Marquee-like Content Scrolling (HTML & CSS)"?mobile menu icon

  • This feature is available in the UDL Helper extension. Make sure that "Show the video snapshot button" is checked in the settings. A camera icon should appear in the lower right corner of the player to the left of the "Settings" icon. When you click on it, the current frame from the video will be saved to your computer in JPEG format.

mobile menu iconWhat's the price of all this stuff?mobile menu icon

  • It costs nothing. Our services are absolutely free for all users. There are no PRO subscriptions, no restrictions on the number or maximum length of downloaded videos.