video presentation html code

How to Create a Slideshow with HTML, CSS, and JavaScript

A web slideshow is a sequence of images or text that consists of showing one element of the sequence in a certain time interval.

For this tutorial you can create a slideshow by following these simple steps:

Write some markup

Write styles to hide slides and show only one slide..

To hide the slides you have to give them a default style. It'll dictate that you only show one slide if it is active or if you want to show it.

Change the slides in a time interval.

The first step to changing which slides show is to select the slide wrapper(s) and then its slides.

When you select the slides you have to go over each slide and add or remove an active class depending on the slide that you want to show. Then just repeat the process for a certain time interval.

Keep it in mind that when you remove an active class from a slide, you are hiding it because of the styles defined in the previous step. But when you add an active class to the slide, you are overwritring the style display:none to display:block , so the slide will show to the users.

Codepen example following this tutorial

If this article was helpful, share it .

Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started

The HTML Presentation Framework

Created by Hakim El Hattab and contributors

Hello There

reveal.js enables you to create beautiful interactive slide decks using HTML. This presentation will show you examples of what it can do.

Vertical Slides

Slides can be nested inside of each other.

Use the Space key to navigate through all slides.

Basement Level 1

Nested slides are useful for adding additional detail underneath a high level horizontal slide.

Basement Level 2

That's it, time to go back up.

Not a coder? Not a problem. There's a fully-featured visual editor for authoring these, try it out at https://slides.com .

Pretty Code

Code syntax highlighting courtesy of highlight.js .

Even Prettier Animations

Point of view.

Press ESC to enter the slide overview.

Hold down the alt key ( ctrl in Linux) and click on any element to zoom towards it using zoom.js . Click again to zoom back out.

(NOTE: Use ctrl + click in Linux.)

Auto-Animate

Automatically animate matching elements across slides with Auto-Animate .

Touch Optimized

Presentations look great on touch devices, like mobile phones and tablets. Simply swipe through your slides.

Add the r-fit-text class to auto-size text

Hit the next arrow...

... to step through ...

... a fragmented slide.

Fragment Styles

There's different types of fragments, like:

fade-right, up, down, left

fade-in-then-out

fade-in-then-semi-out

Highlight red blue green

Transition Styles

You can select from different transitions, like: None - Fade - Slide - Convex - Concave - Zoom

Slide Backgrounds

Set data-background="#dddddd" on a slide to change the background color. All CSS color formats are supported.

Image Backgrounds

Tiled backgrounds, video backgrounds, ... and gifs, background transitions.

Different background transitions are available via the backgroundTransition option. This one's called "zoom".

You can override background transitions per-slide.

Iframe Backgrounds

Since reveal.js runs on the web, you can easily embed other web content. Try interacting with the page in the background.

Marvelous List

• No order here

Fantastic Ordered List

• One is smaller than...
• Two is smaller than...

Tabular Tables

Clever quotes.

These guys come in two forms, inline: The nice thing about standards is that there are so many to choose from and block:

“For years there has been a theory that millions of monkeys typing at random on millions of typewriters would reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue.”

Intergalactic Interconnections

You can link between slides internally, like this .

Speaker View

There's a speaker view . It includes a timer, preview of the upcoming slide as well as your speaker notes.

Press the S key to try it out.

Export to PDF

Presentations can be exported to PDF , here's an example:

Global State

Set data-state="something" on a slide and "something" will be added as a class to the document element when the slide is open. This lets you apply broader style changes, like switching the page background.

State Events

Additionally custom events can be triggered on a per slide basis by binding to the data-state name.

Take a Moment

Press B or . on your keyboard to pause the presentation. This is helpful when you're on stage and want to take distracting slides off the screen.

• Right-to-left support
• Extensive JavaScript API
• Auto-progression
• Parallax backgrounds
• Custom keyboard bindings

- Try the online editor - Source code & documentation

Create Stunning Presentations on the Web

reveal.js is an open source HTML presentation framework. It's a tool that enables anyone with a web browser to create fully-featured and beautiful presentations for free.

Presentations made with reveal.js are built on open web technologies. That means anything you can do on the web, you can do in your presentation. Change styles with CSS, include an external web page using an <iframe> or add your own custom behavior using our JavaScript API .

The framework comes with a broad range of features including nested slides , Markdown support , Auto-Animate , PDF export , speaker notes , LaTeX support and syntax highlighted code .

Ready to Get Started?

It only takes a minute to get set up. Learn how to create your first presentation in the installation instructions !

Online Editor

If you want the benefits of reveal.js without having to write HTML or Markdown try https://slides.com . It's a fully-featured visual editor and platform for reveal.js, by the same creator.

Supporting reveal.js

This project was started and is maintained by @hakimel with the help of many contributions from the community . The best way to support the project is to become a paying member of Slides.com —the reveal.js presentation platform that Hakim is building.

Slides.com — the reveal.js presentation editor.

Become a reveal.js pro in the official video course.

DEV Community

Posted on Jan 11, 2019

How To Build A Captivating Presentation Using HTML, CSS, & JavaScript

Building beautiful presentations is hard. Often you're stuck with Keynote or PowerPoint, and the templates are extremely limited and generic. Well not anymore.

Today, we're going to learn how to create a stunning and animated presentation using HTML, CSS, and JavaScript.

If you're a beginner to web development, don't fret! This tutorial will be easy enough to keep up with. So let's slide right into it!

We're going to be using an awesome framework called Reveal.js . It provides robust functionality for creating interesting and customizable presentations.

• Head over to the Reveal.js repository and clone the project (you can also fork this to your GitHub namespace).

• Change directories into your newly cloned folder and run npm install to download the package dependencies. Then run npm start to run the project.

The index.html file holds all of the markup for the slides. This is one of the downsides of using Reveal.js; all of the content will be placed inside this HTML file.

Built-In Themes

Reveal includes 11 built-in themes for you to choose from:

Changing The Theme

• Open index.html
• Change the CSS import to reflect the theme you want to use

The theme files are:

• solarized.css

Custom Themes

It's quite easy to create a custom theme. Today, I'll be using my custom theme from a presentation I gave called "How To Build Kick-Ass Website: An Introduction To Front-end Development."

Here is what my custom slides look like:

Creating A Custom Theme

• Open css/theme/src inside your IDE. This holds all of the Sass files ( .scss ) for each theme. These files will be transpiled to CSS using Grunt (a JavaScript task runner). If you prefer to write CSS, go ahead and just create the CSS file inside css/theme.
• Create a new  .scss file. I will call mine custom.scss . You may have to stop your localhost and run npm run build to transpile your Sass code to CSS.
• Inside the index.html file, change the CSS theme import in the <head> tag to use the name of the newly created stylesheet. The extension will be  .css , not  .scss .
• Next, I created variables for all of the different styles I wanted to use. You can find custom fonts on Google Fonts. Once the font is downloaded, be sure to add the font URL's into the index.html file.

Here are the variables I chose to use:

• Title Font: Viga
• Content Font: Open Sans
• Code Font: Courier New
• Cursive Font: Great Vibes
• Yellow Color: #F9DC24
• Add a  .reveal class to the custom Sass file. This will wrap all of the styles to ensure our custom theme overrides any defaults. Then, add your custom styling!

Unfortunately, due to time constraints, I'll admit that I used quite a bit of  !important overrides in my CSS. This is horrible practice and I don't recommend it. The reveal.css file has extremely specific CSS styles, so I should have, if I had more time, gone back and ensured my class names were more specific so I could remove the  !importants .

Mixins & Settings

Reveal.js also comes with mixins and settings you can leverage in your custom theme.

To use the mixins and settings, just import the files into your custom theme:

Mixins You can use the vertical-gradient, horizontal-gradient, or radial-gradient mixins to create a neat visual effect.

All you have to do is pass in the required parameters (color value) and voila, you've got a gradient!

Settings In the settings file, you'll find useful variables like heading sizes, default fonts and colors, and more!

The structure for adding new content is:

.reveal > .slides > section

The <section> element represents one slide. Add as many sections as you need for your content.

Vertical Slides

To create vertical slides, simply nest sections.

Transitions

There are several different slide transitions for you to choose from:

To use them, add a data-transition="{name}" to the <section> which contains your slide data.

Fragments are great for highlighting specific pieces of information on your slide. Here is an example.

To use fragments, add a class="fragment {type-of-fragment}" to your element.

The types of fragments can be:

• fade-in-then-out
• fade-in-then-semi-out
• highlight-current-blue
• highlight-red
• highlight-green
• highlight-blue

You can additionally add indices to your elements to indicate in which order they should be highlighted or displayed. You can denote this using the data-fragment-index={index} attribute.

There are way more features to reveal.js which you can leverage to build a beautiful presentation, but these are the main things which got me started.

To learn more about how to format your slides, check out the reveal.js tutorial . All of the code for my presentation can be viewed on GitHub. Feel free to steal my theme!

Top comments (18)

Templates let you quickly answer FAQs or store snippets for re-use.

• Joined Oct 2, 2018

I really love reveal.js. I haven't spoken in a while so I haven't used it. I've always used their themes and never thought about making my own. This is probably super useful for company presentations, too. I'm SO over google slides. Trying to format code in those is a nightmare LOL

• Location Stockholm
• Education Siena College
• Work Software Engineer at Spotify
• Joined Dec 21, 2018

Yeah it is time consuming, but the result is much better

• Location Antibes, France
• Work Senior Software Engineer at Spotify
• Joined Oct 16, 2017

The best thing in this - and now I'm not being ironic - is that while you work on a not so much technical task - creating a presentation - you still have to code. And the result is nice.

On the other hand, I know what my presentation skills teachers would say. Well, because they said it... :) If you really want to deliver a captivating presentation, don't use slides at all. Use the time to prepare what you want to say.

I'm not that good - yet, but taking their advice, if must I use few slides, with little information on them and with minimal graphical distractions. My goal is to impress them by what I say, not is what behind my head.

I'm going to a new training soon, where the first day we have to deliver a presentation supported by slides at a big auditorium and the next day we have to go back and forget about the slides and just get on stage and speak. I can't wait for it.

• Location Lake Villa, IL
• Education Bachelor in Electronics Engineering
• Work Computer & Technology Enthusiast
• Joined Oct 8, 2017

How about github.com/team-fluxion/slide-gazer ?

It's my fourth attempt at creating a simple presentation tool to help one present ideas quickly without having to spend time within a presentation editor like Microsoft PowerPoint. It directly converts markdown documents into elegant presentations with a few features and is still under development.

• Location Singapore
• Work Web Developer at FirstCom Solutions
• Joined Jan 15, 2019

Yup, RevealJS is awesome !

Previously I either used PPT or Google Slides. One is a paid license and the other requires an internet connection.

The cool thing about it is that since it's just HTML files behind the scenes, the only software you need to view it with is a web browser. Has amazing syntax-highlighting support via PrismJS. And as a web developer, it makes it simple to integrate other npm packages if need be...

I actually just used it to present a talk this week!

• Email [email protected]
• Location Indianapolis, IN
• Education Purdue University
• Pronouns he/him
• Work Senior Frontend Engineer at Whatnot
• Joined Aug 3, 2017

Great article, Emma! I love Reveal and this is a great write up for using it!

• Email [email protected]
• Location New Delhi, India 🇮🇳
• Joined Dec 5, 2018

I think its a coincidence 😅 I was just starting to think to use reveal.js and suddenly you see this post 🤩

• Location Saratoga Springs,NY
• Education BA, University of Michigan
• Work Documentarian
• Joined Sep 7, 2018

Check out slides.com If you want to skip the heavy lifting and/or use a presentation platform based on reveal.js.

Everything is still easy to customize. The platform provides a UI to work from and an easy way to share your stuff.

BTW - I have no affiliation with slides.com, or even a current account. I used the service a few years back when I regularly presented and wanted to get over PowerPoint, Google Slides, Prezi, etc.

• Location Toronto, ON
• Education MFA in Art Video Syracuse University 2013 😂
• Work Cannot confirm or deny atm
• Joined May 31, 2017

Well I guess you get to look ultra pro by skipping the moment where you have to adjust for display detection and make sure your notes don’t show because you plugged your display connector in 😩 But If the conference has no wifi then we’re screwed I guess

• Location Palm Bay, FL
• Education FullSail University
• Work Developer Relations Manager at MetaMask
• Joined Sep 16, 2018

I like Reveal, but I still have not moved past using Google docs slides because every presentation I do has to be done yesterday. Hoping that I can use Reveal more often this year as I get more time to work on each presentation.

• Email [email protected]
• Location Abuja Nigeria
• Work Project Manager Techibytes Media
• Joined Feb 19, 2019

Well this is nice and I haven't tried it maybe because I haven't spoken much in meet ups but I think PowerPoint is still much better than going all these steps and what if I have network connection issues that day then I'm scrolled right?

• Email [email protected]
• Joined Apr 16, 2018

Using Node and Soket.io remote control (meant to be used on phones) for my school's computer science club, it also features some more goodies which are helpful when having multiple presentations. It can be modded to use these styling techniques effortlessly. Feel free to fork!

SBCompSciClub / prez-software

A synchronized role based presentation software using node, prez-software.

TODO: Make system to easily manage multiple presentations Add Hash endocing and decoding for "sudo" key values TODO: Document Code

Run on Dev Server

npm i nodemon app.js Nodemon? - A life saving NPM module that is ran on a system level which automatically runs "node (file.js)" when files are modified. Download nodemon by running npm i -g nodemon

Making a Presentation

• Copy an existing presentation folder
• Change the folder name (which should be located at public/slides) with the name day[num of day] ex(day2)

Making a Slide

Making a slide is pretty simple. Just add a HTML section. <section> <!--slide content--> </section> inside the span with the class of "prez-root". Also keep in mind that you will need to copy and pate the markup inside the prez root to the other pages (viewer & controller).

Adding Text

You may add text however you desire, but for titles use the…

Awesome post! I’m glad I’m not the only one who likes libraries. 😎

• Location Los Angeles
• Education Engineering, Physics, and Math
• Joined Sep 6, 2018

Fantastic post. I just loved it.

• Location France
• Work Co-Founder of Depot
• Joined Sep 2, 2017

Awesome introduction! I feel like I need to give this a try the next time I create a presentation.

Some comments may only be visible to logged-in visitors. Sign in to view all comments.

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink .

Hide child comments as well

For further actions, you may consider blocking this person and/or reporting abuse

How to Create a Simple Tab Navigation UI with HTML, CSS, and JavaScript

Shekhar Tarare - May 21

The Future of Web Development: Embracing Progressive Web Apps (PWAs)

Nikhil Pandey - May 21

The reason why becoming a Software Engineer is a struggle.

Sacha Nocetto - May 21

Benefits Of Using An IDE For React Native Development

Saumya - May 7

We're a place where coders share, stay up-to-date and grow their careers.

• Privacy Policy

Exploring the Power of the Video Tag in HTML: A Comprehensive Guide

Table of contents, 1. introduction.

The <video> tag in HTML is an essential element that allows web developers to embed and display videos directly within web pages. It is part of the HTML5 specification and provides a standardized way to integrate videos into websites without the need for external plugins or Flash-based players. In this blog post you will also learn how to insert mp4 video in html.

2. Understanding the <video> Tag

2.1. syntax and basic usage.

The <video> tag in HTML has a simple syntax. Here’s an example of the basic structure:

Let’s break down the components of the syntax:

• <video> : This is the opening tag of the video element.
• src : This attribute specifies the URL or path to the video file. It should be included within the opening <video> tag.
• "video-file.mp4" : This is the value of the src attribute, which represents the URL or path to the video file. You need to provide the correct path or URL to your video file.
• controls : This attribute is optional but highly recommended. It adds a default set of playback controls to the video player, allowing users to play, pause, adjust volume, and seek through the video.

2.2. Supported Video Formats and Browser Compatibility

The <video> tag in HTML5 supports various video formats, and the browser determines which format to play based on compatibility. The commonly supported video formats are:

• MP4 (MPEG-4 Part 14): It is the most widely supported video format and is compatible with the majority of modern web browsers, including Chrome, Firefox, Safari, and Edge.
• WebM (VP8/VP9): It is an open-source video format supported by Chrome, Firefox, and Opera. WebM offers efficient compression and good video quality.
• Ogg (Theora): Ogg is an open-source multimedia format that includes the Theora video codec. It is supported by Firefox, Chrome, and Opera.

It’s recommended to provide multiple video sources in different formats to ensure compatibility across various browsers. This is done using the <source> tag within the <video> element. The browser will select the first compatible format and play it. Here’s an example:

In the above example, the browser will try to play the MP4 format first, then fallback to WebM or Ogg formats if MP4 is not supported.

It’s important to note that browser compatibility may vary, so it’s a good practice to test your videos across different browsers and versions to ensure a consistent playback experience for your users.

3. Controlling Video Playback

3.1. playback controls and attributes.

The <video> tag provides built-in playback controls that allow users to interact with the video. By default, these controls include buttons for play/pause, volume control, and seeking through the video timeline. Here are some common playback controls and attributes:

3.2. Play, Pause, Seek, and Volume Adjustment

• Play/Pause: The play/pause button allows users to start or pause the video playback. It is automatically included when you add the controls attribute to the <video> tag.
• Volume Control: The volume control allows users to adjust the volume of the video. It typically appears as a slider or a speaker icon. Users can increase or decrease the volume by dragging the slider or clicking on the speaker icon.
• Seeking: The seeking feature allows users to move to a specific point in the video. They can either drag the progress bar or click on a specific position to jump to that part of the video.
• Fullscreen: The fullscreen button enables users to view the video in fullscreen mode, utilizing the entire screen space. Clicking on the fullscreen button expands the video to fullscreen and clicking again exits fullscreen mode.

3.3. Customizing Video Controls with CSS

The appearance of video controls can be customized using CSS to match the overall design of your website. Here are some CSS properties you can use to customize video controls:

• ::-webkit-media-controls : This pseudo-element targets the default video controls in WebKit-based browsers, such as Chrome and Safari. You can apply styles like changing the background color, adjusting the font size, or modifying the button styles.
• ::-moz-media-controls : This pseudo-element targets the default video controls in Mozilla Firefox. You can use it to customize the appearance of controls specifically in Firefox.
• ::-ms-media-controls : This pseudo-element targets the default video controls in Microsoft Edge.
• Custom Buttons : You can replace the default video control buttons with custom-designed buttons using HTML and CSS. By hiding the default controls ( controls="false" ) and adding your own buttons, you have complete control over the design and functionality.

Here’s an example of customizing the play/pause button using CSS:

In the example above, the play button of the video controls will be styled with a red background color. You can apply similar styles to other control elements as well.

By leveraging CSS, you can enhance the visual appeal and user experience of your video controls, making them more aligned with your website’s design aesthetic.

4. Embedding Videos

4.1. using the <source> tag:.

To embed videos in HTML using the <video> tag, you can use the <source> tag within it. The <source> tag allows you to specify multiple video sources in different formats, and the browser will automatically choose the most suitable one based on its compatibility. Here’s an example:

In the example above, we provide three video sources in different formats: MP4, WebM, and Ogg. The browser will try to play the video using the first supported format it recognizes. If none of the formats are supported, the browser will display the fallback message “Your browser doesn’t support HTML5 video.”

4.2. Understanding Video Formats (MP4, WebM, Ogg) and Compatibility:

Different video formats have varying levels of browser compatibility. It’s important to understand the common video formats and their compatibility to ensure your videos can be played across different browsers and devices. Here are the commonly used video formats:

• MP4 (MPEG-4 Part 14): MP4 is a widely supported video format compatible with most modern browsers, including Chrome, Firefox, Safari, and Edge. It provides good compression and quality, making it suitable for web delivery.
• WebM: WebM is an open-source video format developed by Google. It is supported by modern browsers like Chrome, Firefox, and Opera. WebM offers efficient compression and high-quality video, making it a popular choice for web-based video content.
• Ogg: The Ogg format, specifically the Ogg Theora video codec, is an open-source and royalty-free video format. It is supported by Firefox, Chrome, and Opera. While it may not have as widespread support as MP4 and WebM, it can still be used as an alternative format for compatibility.

When embedding videos, it’s recommended to provide multiple sources in different formats to increase the likelihood of compatibility across various browsers.

4.3. Providing Fallback Options for Unsupported Formats:

Since not all browsers support the same video formats, it’s essential to provide fallback options for unsupported formats. This ensures that users can still access the video content even if their browser doesn’t support the primary format. The fallback option can be a different video format or alternative content, such as a textual description or a link to download the video.

In the example mentioned earlier, the fallback message “Your browser doesn’t support HTML5 video” is displayed if none of the specified video formats are supported. You can customize this message according to your preference, providing instructions or alternative content to the user.

By using the <source> tag and providing fallback options, you can ensure that your videos are accessible and playable across a wide range of browsers and devices, enhancing the user experience and reaching a broader audience.

5. Responsive Video Design

With the increasing variety of devices and screen sizes, it’s important to make sure that your videos adapt to different viewport sizes and provide an optimal viewing experience across devices. Responsive video design involves creating fluid and flexible videos, implementing video scaling and aspect ratios, and handling different screen sizes and devices effectively.

5.1. Creating Fluid and Responsive Videos

To create fluid and responsive videos, you can use CSS techniques to ensure that the video element scales proportionally to the size of its container. By setting the video’s width to 100% and allowing the height to adjust automatically, the video will adapt to the available space while maintaining its aspect ratio. Here’s an example:

In the example above, the .video-container class creates a responsive container for the video. The padding-bottom property with a percentage value ensures that the container maintains a specific aspect ratio (in this case, 16:9). The video element within the container is positioned absolutely and takes up the entire space within the container.

5.2. Implementing Video Scaling and Aspect Ratios

When designing responsive videos, it’s crucial to consider the aspect ratio of the original video to prevent distortion. You can use CSS techniques, as shown in the previous example, to maintain the aspect ratio. By specifying a percentage-based padding-bottom value, you can ensure that the video scales proportionally and retains its original aspect ratio.

Additionally, you can use CSS media queries to target specific screen sizes or devices and apply different styles or aspect ratios accordingly. This allows you to optimize the video’s appearance and ensure it looks great on various devices.

5.3. Handling Different Screen Sizes and Devices

When it comes to handling different screen sizes and devices, responsive design principles should be applied to ensure that videos are accessible and visually appealing across various devices. This involves:

• Using CSS media queries to adjust the video’s size, aspect ratio, or other properties based on the screen size or device orientation.
• Providing multiple video sources in different resolutions or bitrates, and using media queries or JavaScript to select the appropriate source based on the device’s capabilities or network conditions.
• Considering touch interactions on mobile devices and implementing appropriate controls or gestures for video playback.
• Testing and optimizing the video’s performance on different devices and network conditions to ensure smooth playback.

By implementing responsive design techniques and considering the needs of users on different devices, you can create a seamless video experience that adapts to varying screen sizes and enhances the user experience.

6. Styling Video Elements

6.1. applying css styles to the <video> tag.

The <video> tag can be styled using CSS to customize its appearance and integrate it seamlessly into your website’s design. Here are some common CSS properties you can use to style the <video> tag:

• Width and height: You can specify the dimensions of the video element using the width and height properties. This allows you to control the size of the video player on your web page.
• Border: You can apply borders to the video element using the border property. This can be useful to create a visually distinct frame around the video.
• Background color: You can set the background color of the video element using the background-color property. This can be used to match the background color of your website or create a specific visual effect.
• Box shadow: You can apply box shadows to the video element using the box-shadow property. This can add depth and visual interest to the video player.
• Positioning and layout: You can use CSS positioning and layout techniques to control the positioning of the video element on your web page. This includes properties such as position, top, bottom, left, and right.

Here are some examples of applying style to video tag in html:

• Changing the size and position:

In this example, the video element will take up 100% of its container’s width, while maintaining its aspect ratio. It will also be horizontally centered using the left and transform properties.

• Adding a border and box shadow:

This code applies a 2px solid border around the video element and adds a subtle box shadow to give it a three-dimensional effect.

• Customizing the playback controls:

This example targets the webkit-specific pseudo-elements of the video’s media controls and applies custom styles. Here, the background color and text color of the controls are modified, and the play button and volume slider are styled.

• Overlaying a play button on the video: HTML:

In this example, a play button is added as an overlay on the video by positioning it absolutely within a parent container. The play button image is specified as the background image, and its size and position are adjusted accordingly.

These are just a few examples of how CSS styles can be applied to the <video> tag to customize its appearance. With CSS, you have extensive control over the visual presentation of the video element, allowing you to match it with your website’s design and create a more engaging user experience.

6.2. Designing Custom Video Player Interfaces

If you want to go beyond the default video player controls provided by the browser, you can design custom video player interfaces using HTML, CSS, and JavaScript. This allows you to create unique and tailored experiences for your users. Some approaches to designing custom video player interfaces include:

• Creating custom buttons and controls: Instead of relying on the default controls, you can design your own buttons and controls using HTML and CSS. This gives you complete control over the visual appearance and behavior of the video player.
• Implementing progress bars and timelines: You can create custom progress bars and timelines to display the current playback position and allow users to seek through the video. This can be done using HTML, CSS, and JavaScript to update the progress based on the video’s playback time.
• Adding additional features and interactions: With a custom video player interface, you can incorporate additional features such as fullscreen mode, playback speed controls, volume sliders, and more. These can enhance the user experience and provide more control over the video playback.

6.3. Enhancing Aesthetics and User Experience

When designing video elements on your website, it’s important to consider the aesthetics and user experience. Here are some tips to enhance the visual appeal and user experience of your video content:

• Choose an appropriate video player size: Consider the layout and design of your website when determining the size of the video player. Ensure that it fits well within the overall design and doesn’t overpower other elements on the page.
• Use high-quality video assets: Opt for high-resolution videos that are clear and visually appealing. This enhances the overall quality of your video content and provides a better viewing experience for users.
• Optimize loading times: Compress and optimize your video files to reduce their size without sacrificing quality. This helps to improve loading times and ensures smooth playback, especially on slower internet connections.
• Consider video autoplay and muted settings: Autoplaying videos can grab users’ attention, but it’s important to be mindful of user preferences and accessibility considerations. If autoplaying, consider muting the video initially and providing clear controls for users to unmute if desired.
• Provide captions or subtitles: If your video includes spoken content, consider adding captions or subtitles to make it accessible to users who are deaf or hard of hearing. This improves the overall inclusivity and usability of your video content.

By applying CSS styles, designing custom video player interfaces, and focusing on aesthetics and user experience, you can create visually appealing and engaging video elements that enhance the overall impact of your website’s video content.

7. Accessibility Considerations

7.1. providing alternative text and captions:.

To ensure video accessibility, it’s important to provide alternative text (or “alt text”) and captions for your videos. This helps individuals with visual impairments or who are using assistive technologies to understand the content of the video. Here’s how you can implement these accessibility features:

• Alternative Text: Add a meaningful description of the video using the alt attribute on the <video> tag. This text will be read aloud by screen readers to provide context. For example:
• Captions: Include closed captions or subtitles for videos that have spoken or important audio content. You can use the <track> element inside the <video> tag to specify the caption source file. For example:

In this example, the src attribute of the <track> element points to the caption file, and additional attributes provide information such as the kind of captions, label, language, and default display.

7.2. Implementing Keyboard Accessibility:

To ensure keyboard accessibility for video controls, you need to enable keyboard focus and provide keyboard shortcuts for controlling video playback. Here are a few considerations:

• Ensure Focusability: Make sure that the video element and its controls can be reached and interacted with using the keyboard. You can achieve this by ensuring that the video has a tabindex attribute set to 0 , which makes it focusable. For example:
• Keyboard Shortcuts: Implement keyboard shortcuts to control video playback. Common keyboard shortcuts include Spacebar to toggle play/pause, Arrow Left/Right to seek backward/forward, Arrow Up/Down to adjust volume, and M to mute/unmute. You can handle these keyboard events with JavaScript.

7.3. Ensuring Video Accessibility for Users with Disabilities:

To make videos more accessible for users with disabilities, consider the following:

• Audio Descriptions: For visually impaired users, provide audio descriptions that narrate important visual elements or actions happening in the video. These descriptions can be included in the audio track or as a separate audio file.
• Transcript: Offer a transcript of the video’s dialogue and important audio information. This allows users with hearing impairments or those who prefer reading to access the video content. The transcript can be placed below the video or provided as a separate link.
• Accessibility Testing: Regularly test your videos with assistive technologies and screen readers to ensure they can be accessed and understood by users with disabilities. Validate the accessibility of your videos using tools like the WAVE Web Accessibility Evaluation Tool or the Accessibility Insights for Web browser extension.

By implementing alternative text, captions, keyboard accessibility, and considering the needs of users with disabilities, you can enhance the accessibility of your videos and make them more inclusive for a wider range of users.

8. Advanced Video Features

8.1. autoplay and looping videos:.

Autoplay allows the video to start playing automatically when the webpage loads. Looping enables the video to replay continuously once it reaches the end. Here’s how you can implement these features:

• Autoplay: To enable autoplay, add the autoplay attribute to the <video> tag. For example:

Note that autoplay behavior may be restricted by browser settings or policies. To ensure a better user experience, consider providing a fallback option for browsers that don’t support autoplay or for users who prefer to manually play the video.

• Looping: To make the video loop continuously, use the loop attribute on the <video> tag. For example:

This will cause the video to restart automatically once it reaches the end.

8.2. Implementing Subtitles and Closed Captions:

Subtitles and closed captions are textual representations of the audio content in a video. They can be helpful for viewers who are deaf or hard of hearing, as well as those who prefer to watch videos with captions. Here’s how you can implement subtitles and closed captions:

• Subtitles: You can add subtitles to your video by including a <track> element inside the <video> tag. For example:

In this example, the src attribute of the <track> element points to the subtitle file (in WebVTT format), and additional attributes provide information about the kind of subtitles, label, language, and default display.

• Closed Captions: Closed captions are similar to subtitles, but they also include non-dialogue audio information such as sound effects or background music. To add closed captions, use the kind="captions" attribute on the <track> element.

8.3. Working with Video Tracks and Metadata:

Video tracks and metadata allow you to include additional information and synchronized content with your video. Some common use cases include multiple camera angles, alternative audio tracks, or interactive overlays. Here’s how you can work with video tracks and metadata:

• Video Tracks: You can include multiple video tracks by using the <track> element with the kind="video" attribute. Each video track can have different qualities, camera angles, or alternative versions. JavaScript can be used to switch between different tracks based on user interaction or specific conditions.
• Metadata: Video metadata provides information about the video content, such as title, description, duration, or chapters. You can include metadata using the <meta> element within the <video> tag. For example:

Metadata can also be accessed and manipulated through JavaScript to enhance the functionality and user experience of your video player.

By leveraging autoplay and looping features, implementing subtitles and closed captions, and working with video tracks and metadata, you can enhance the viewing experience and provide more interactive and accessible video content on your website.

9. Video Events and Interactions

9.1. understanding video events and event handling:.

HTML5 video elements provide a set of events that you can listen for and respond to using JavaScript. These events allow you to control and enhance the behavior of the video player. Here are some commonly used video events:

• play : Triggered when the video starts playing.
• pause : Triggered when the video is paused.
• ended : Triggered when the video playback reaches the end.
• timeupdate : Triggered continuously as the playback position of the video changes.
• seeked : Triggered when the user seeks to a new position in the video.
• volumechange : Triggered when the volume level of the video changes.

By listening for these events, you can perform actions such as updating the UI, displaying messages, tracking user interactions, or synchronizing with other elements on the page.

Example: Adding a Play/Pause Button

In this example, we have an HTML5 video element with an assigned ID of “myVideo” and a button with an ID of “playButton”. We use JavaScript to listen for the “click” event on the playButton. When the button is clicked, we check the current state of the video. If it is paused, we play the video and update the button text to “Pause”. If it is playing, we pause the video and update the button text to “Play”. This creates a simple play/pause toggle functionality.

9.2. Implementing Custom Video Interactions with JavaScript:

JavaScript allows you to create custom interactions and behaviors for your video player. You can manipulate the video element, respond to user input, and add interactive features. Here are some examples:

• Play and Pause: You can create custom play and pause buttons to control the video playback. When the user clicks the play button, you can use the play() method to start the video, and the pause() method to pause it.
• Seeking: Implementing custom seeking controls allows users to jump to specific points in the video. You can use the currentTime property to set the playback position of the video.
• Volume Control: You can create a volume slider or buttons to control the volume level of the video. By adjusting the volume property, you can change the audio output.
• Fullscreen Mode: Implementing a fullscreen button allows users to expand the video to fill the entire screen. You can use the requestFullscreen() method to enable fullscreen mode.

These are just a few examples of the custom interactions you can implement with JavaScript. By combining HTML5 video events and JavaScript functionality, you have the flexibility to create a rich and interactive video experience.

Example: Seeking to a Specific Time

In this example, we have an HTML5 video element with an assigned ID of “myVideo” and an input range element with an ID of “seekBar”. We use JavaScript to listen for the “input” event on the seekBar. When the user changes the value of the seekBar, we calculate the corresponding time to seek to in the video by multiplying the video’s duration by the percentage represented by the seekBar value. We then update the currentTime property of the video element, which seeks to the desired time in the video.

9.3. Syncing Video with Other Web Elements:

Sometimes, you may want to synchronize the playback of a video with other web elements, such as animations, transitions, or interactive content. This can create engaging and immersive experiences. Here are some ways to achieve synchronization:

• Timing and Animation: You can use the timeupdate event of the video element to trigger animations or transitions at specific points in the video. For example, you can fade in text captions or trigger CSS animations when certain scenes or timestamps are reached.
• Interactive Elements: By combining video events with user interactions, you can create interactive elements that respond to the video playback. For instance, you can display additional information or trigger actions when the video reaches a particular time.
• JavaScript Synchronization: Using JavaScript, you can precisely synchronize the video with other elements by listening to video events and manipulating the properties or states of those elements. This can be useful for building complex interactions, quizzes, or interactive narratives.

The ability to sync video with other web elements adds depth and interactivity to your content, allowing you to create captivating experiences for your audience.

Example: Displaying Text Captions at Specific Times

In this example, we have an HTML5 video element with an assigned ID of “myVideo” and a div element with an ID of “captionContainer”. We use JavaScript to listen for the “timeupdate” event on the video. As the video’s playback position changes, we check the currentTime property and display different text captions in the captionContainer based on specific time ranges. In this case, we display different captions for the first and second scenes of the video based on their respective time intervals.

10. Optimizing Video Performance

10.1. techniques for optimizing video files for web delivery:.

To optimize video files for web delivery, consider the following techniques:

• Use the appropriate video format: Choose the most suitable video format that offers a good balance between file size and quality. Common formats include MP4 (H.264), WebM (VP8/VP9), and Ogg (Theora/Vorbis).
• Adjust video resolution: Optimize the video resolution based on the target device and screen size. Lower resolutions can significantly reduce file size and improve loading times.
• Control video bitrate: Adjust the video’s bitrate to achieve an optimal balance between file size and quality. Lower bitrates reduce file size but may result in lower video quality.
• Trim unnecessary footage: Remove any unnecessary parts of the video to reduce its duration and file size.
• Use video compression tools: Utilize video compression tools to compress the video file without significant loss of quality. These tools often employ advanced compression algorithms to optimize the file size.

10.2. Compression and Encoding Considerations for Smaller File Sizes:

To compress and encode videos for smaller file sizes, consider the following considerations:

• Video codecs: Choose efficient video codecs such as H.264 (AVC) or H.265 (HEVC) that provide good compression and quality. These codecs are widely supported by modern browsers.
• Bitrate and quality settings: Adjust the bitrate and quality settings to find the right balance between file size and video quality. Lower bitrates result in smaller file sizes but may affect video clarity.
• Audio compression: Compress the audio track of the video using appropriate audio codecs like AAC or Opus. Reduce the audio bitrate without compromising the audio quality.
• Optimized encoding parameters: Use encoding parameters that are suitable for web delivery. Experiment with different encoding settings to find the optimal combination of file size and quality.

10.3. Preloading and Buffering Strategies for Smooth Video Playback:

To ensure smooth video playback, consider the following preloading and buffering strategies:

• Preload metadata: Use the preload="metadata" attribute in the video tag to load only the video’s metadata (such as duration and dimensions) initially. This allows the browser to start rendering the video player without downloading the entire video file.
• Buffering: Implement buffering techniques to ensure a smooth playback experience. Buffering involves downloading a certain portion of the video before playback starts to ensure uninterrupted streaming. You can use the Media Source Extensions (MSE) API or JavaScript libraries like Plyr or Video.js to handle buffering.
• Adaptive bitrate streaming: Implement adaptive bitrate streaming techniques, such as HTTP Live Streaming (HLS) or Dynamic Adaptive Streaming over HTTP (DASH), to dynamically adjust the video quality based on the viewer’s internet connection. This helps to prevent buffering issues and provide a seamless viewing experience.
• Preloading strategies: Depending on the context, you can consider preloading the video file before it’s requested by the user. However, be mindful of the file size and the impact on page load times.

By implementing these optimization techniques, you can improve video performance, reduce loading times, and enhance the overall user experience when viewing videos on your website.

11. Video in a Cross-Browser Environment

11.1. cross-browser compatibility and testing:.

When working with videos in a cross-browser environment, it’s important to ensure that your videos are compatible with different web browsers. Test your videos on various browsers (such as Chrome, Firefox, Safari, and Edge) to ensure consistent playback and functionality. Pay attention to any browser-specific quirks or limitations and make necessary adjustments to ensure a seamless experience for all users.

11.2. Implementing Fallbacks for Unsupported Features:

Not all browsers support the same video formats or features. To ensure that your videos are accessible to all users, it’s important to implement fallback options for unsupported features. For example, you can provide alternative video formats using the <source> tag to cater to different browser capabilities. This way, if a browser doesn’t support the primary video format, it can fallback to a supported format.

11.3. Browser-Specific Considerations and Workarounds:

Different web browsers may have specific considerations or limitations when it comes to video playback. For example, some browsers may have stricter autoplay policies or require specific settings for certain video features to work correctly. It’s important to be aware of these browser-specific considerations and implement appropriate workarounds or adjustments to ensure consistent behavior across different browsers.

12. Best Practices for Using Videos on Websites

12.1. video length and quality:.

Consider the length and quality of your videos when incorporating them into your website. Shorter videos tend to engage users better, so aim to keep your videos concise and focused. Additionally, optimize the video quality based on the context and intended viewing experience. Balance the file size and video resolution to ensure fast loading times without compromising the visual clarity.

12.2. Video Placement and User Experience:

Strategically place your videos within your website to maximize their impact. Consider the user experience and ensure that videos are relevant to the surrounding content. Use clear and enticing video thumbnails or play buttons to encourage user engagement. Avoid auto-playing videos with sound, as this can be disruptive and may lead to a negative user experience.

12.3. Copyright and Licensing Considerations:

Respect copyright laws and licensing agreements when using videos on your website. Ensure that you have the necessary rights and permissions to use the video content. If you’re using third-party videos, make sure to comply with the terms and conditions set by the content owners. Consider using royalty-free or Creative Commons-licensed videos to avoid copyright infringements.

13. Conclusion:

In conclusion, leveraging the <video> tag in HTML5 provides powerful capabilities for incorporating videos into your website. Understanding the syntax, basic usage, and supported video formats is essential for successful video integration. Controlling video playback, embedding videos, and optimizing performance enhance the user experience.

Consider accessibility by providing alternative text, captions, and keyboard accessibility. Implement advanced features such as autoplay, subtitles, and working with video events to add interactivity. Optimize video files for web delivery, ensure cross-browser compatibility, and follow best practices for video length, placement, and copyright considerations.

By following these guidelines and leveraging the capabilities of the <video> tag, you can create engaging and immersive video experiences on your website, enhancing user engagement and satisfaction.

All About HTML

May 29, 2023

Previous Unleashing the Power of HTML5 Audio Player: A Comprehensive Guide

Next a comprehensive guide to tables in html5: creating structured data, related posts ....

Simple Tips to Creating and Styling Responsive Tables in HTML5

Exploring the Power of iframe tag in HTML5: A Comprehensive Guide

Mastering Forms in HTML: A Comprehensive Guide to All Form Fields

Leave a reply cancel reply.

Your email address will not be published. Required fields are marked *

Popular Tutorials

Learn python interactively, popular examples.

• Introduction

What is HTML?

HTML Basics

• HTML Web Design Basics
• HTML Paragraphs
• HTML Headings
• HTML Comments
• HTML Unordered List
• HTML Ordered List
• HTML Description List
• HTML Line Break
• HTML Pre Tag
• HTML Horizontal Line

HTML Inline

• HTML Block and Inline

HTML Images

• HTML Italic
• HTML Superscript and Subscript
• HTML Formatting
• HTML Meta Elements
• HTML Favicon
• HTML Form Elements
• HTML Form Action

Semantic HTML

• HTML Semantic HTML
• HTML div Tag
• HTML aside Tag
• HTML section Tag
• HTML footer Tag
• HTML main Tag
• HTML figure and figcaption
• HTML Accessibility

HTML, CSS & JavaScript

• HTML Layout
• HTML Responsive Web Design
• HTML and JavaScript

Graphics & Media

• HTML Canvas

HTML Miscellaneous

• HTML Iframes
• HTML Entities
• HTML Quotations
• HTML File Paths
• HTML Emojis
• HTML Symbols

Web Tutorials

• Technical Documentation Page

The HTML <video> tag is used to embed a media player which supports video playback into the HTML page. We use the HTML <video> tag and the <source> tag to show the video. For example,

Browser output

In the above code,

• video.mp4 - path to the video we want to display
• video/mp4 - the type of resource we want to display
• controls - allows user to control the video

The video.mp4 file in the above example is located in the same directory as the HTML file.

Note : It is recommended to include height and width for a video similar to HTML Image tag to prevent flickering on the initial page load.

• HTML <video> with Multiple <source> Tag

We can provide multiple sources for the video using <source> tag. For example,

In the above example, the browser chooses the first <source> tag whose resource is supported. If the browser does not support the ogg format, it will move to the next <source> tag and play the mp4 file. This helps video play on a wide range of devices.

Attributes of HTML <video> tag

Let us look at the attributes supported by the HTML <video> tag.

• height and width

We will learn about each of these in detail.

The autoplay attribute automatically plays the video. For example,

In the above program, we have used the autoplay attribute. The video will start playing as soon as it is ready, without requiring the user to click the play button.

Note : The autoplay attribute is generally considered a bad user experience, as it can be annoying for users. Some browsers do not allow video to autoplay unless it is also muted.

The control attribute allows the user to control the video. These controls might include things like a play button, a pause button, and volume control. This can be helpful for allowing the user to control the playback of the video, without needing to use any additional software or tools. For example,

Browser Output

Here, we can see controls provided by the browser.

The height and width attributes in <video> element specify the size of the video player in pixels. For example,

In the above example, the width and height of the video player are set to 600 and 350 pixels respectively.

We can also set the width or height of a video using CSS by applying a width or height property to the <video> element in a stylesheet or with the style attribute. For example,

The height and width attributes let the browser know how much space to allocate for the video. Otherwise, it will cause the surrounding content to move when the video loads.

The loop attribute specifies that the video will automatically play the video from the beginning once it ends. For example,

The muted attribute sets the volume of the video to 0 . For example,

The poster attribute specifies a link to an image to be shown when the video has not been played or is still downloading.

It is more like a thumbnail to the video. It is displayed where the video player will be shown, giving the user a visual indication of what the video is about before they decide to play it. For example,

If you do not specify a poster frame, the first frame of the video will be displayed as the poster frame instead.

The src attribute specifies the location of the video file that should be played in the video player. For example,

Here, the src attribute of the <video> element is used to specify the location of a single video file that should be played in the video player. This is the simplest way to include a video on an HTML page.

Note : At least one src attribute or <source> tag is required for HTML video.

The preload attribute specifies how the video file should be loaded after the page loads for a better user experience. It may have one of the following values:

1. none : Indicates that the video should not be preloaded. For example,

2. metadata : Indicates that only video metadata is fetched. For example,

3. auto : Indicates that the entire video file will be loaded when the page loads. For example,

Table of Contents

• Attributes of HTML tag

Related Tutorials

Programming

How to Create Beautiful HTML & CSS Presentations with WebSlides

Share this article

Getting Started with WebSlides

Create a web presentation with webslides.

• Frequently Asked Questions (FAQs) about Creating Beautiful HTML & CSS Presentations with WebSlides

This article was peer reviewed by Ralph Mason , Giulio Mainardi , and Mikhail Romanov . Thanks to all of SitePoint’s peer reviewers for making SitePoint content the best it can be!

Presentations are one of the best ways to serve information to an audience. The format is short and sharp, made up of small, digestible chunks, which makes any topic under discussion engaging and easier to understand. A presentation can contain all kinds of data, represented by many different elements, such as tables, charts, diagrams, illustrations, images, videos, sounds, maps, lists, etc, all of which lends great flexibility to this medium of expression.

Particularly on the web, presentations come in handy on many occasions, and there are loads of tools at your disposal to create some nifty ones. Today, I’ll introduce you to WebSlides — a small and compact library with a nice set of ready-to-use components, which you can leverage to build well-crafted and attractive web presentations:

WebSlides “is about telling the story, and sharing it in a beautiful way.”

In fact, one of WebSlides’ main benefits is that you can share your story beautifully and in a variety of different ways. With one and the same architecture — 40+ components with semantic classes, and clean and scalable code — you can create portfolios, landings, longforms, interviews, etc.

Besides, you can also extend WebSlides’ functionality by combining it with third-party services and tools such as Unsplash , Animate.css , Animate On Scroll , and so on.

WebSlides is easy to learn and fun to use. Let’s see it in action now.

To get started, first download WebSlides . Then, in the root folder, create a new folder and call it presentation . Inside the newly created presentation folder, create a new file and call it index.html . Now, enter the following code, which contains the needed references to the WebSlides’ files (make sure the filepaths correspond to the folder structure in your setup):

In this section you’re going to create a short, but complete presentation, which explains why SVG is the future of web graphics. Note: If you are interested in SVG, please check my articles: SVG 101: What is SVG? and How to Optimize and Export SVGs in Adobe Illustrator .

You’ll be working step by step on each slide. Let’s get started with the first one.

The first slide is pretty simple. It contains only one sentence:

Each parent <section> inside <article id="webslides"> creates an individual slide. Here, you’ve used two classes from WebSlides’ arsenal, i.e., bg-gradient-r and aligncenter , to apply a radial gradient background and to align the slide content to the center respectively.

The second slide explains what SVG is:

The code above uses the content-left and content-right classes to separate the content into two columns. Also, in order to make the above classes work, you need to wrap all content by using the wrap class. On the left side, the code uses text-subtitle to make the text all caps, and text-intro to increase the font size. The right side consists of an illustrative image.

The next slide uses the grid component to create two columns:

The snippet above shows how to use the grid and column classes to create a grid with two columns. In the first column the style attribute aligns the text to the left (Note how the aligncenter class on the <section> element cascades through to its .column child element, which causes all text inside the slide to be center aligned). In the second column, the browser class makes the illustrative image look like a screenshot.

In the fourth slide, use the grid component again to split the content into two columns:

In this slide, place half of the content to the left and the other half to the right using the content-left and content-right classes respectively:

In this slide, use the background class to embed an image as a background with the Unsplash service . Put the headline on light, transparent background by using the bg-trans-light class. The text’s color appears white, because the slide uses a black background with the bg-black class, therefore the default color is inversed, i.e., white on black rather than black on white. Also, for the text to be visible in front of the image, wrap it with <div class="wrap"> :

In this slide, put the explanation text on the left and the illustrative image on the right at 40% of its default size (with the alignright and size-40 classes on the <img> element). For this and the next three slides, use slideInRight , which is one of WebSlides’ built-in CSS animations:

Do a similar thing here:

This slide also uses a similar structure:

Here, divide the content into left and right again. In the second <p> tag, use the inline style attribute to adjust the font-size and line-height properties. Doing so will override the text-intro class styles that get applied to the element by default. On the right side, use <div class="wrap size-80"> to create a container for the SVG code example:

Here, leverage some of the classes you’ve already used to illustrate browser support for SVG:

In this slide, show some of the use cases for SVG in the form of an image gallery. To this end, use an unordered list with the flexblock and gallery classes. Each item in the gallery is marked up with a li tag:

This section shows a typical SVG workflow, so you need to use the flexblock and steps classes, which show the content as a sequence of steps. Again, each step is placed inside a li tag:

For each step after the first one, you need to add the process-step-# class. This adds a triangle pointing to the next step.

In the last slide, use another one of WebSlides’ built-in CSS animations, i.e., zoomIn :

Congratulations! You’re done. You can see the final outcome here:

See the Pen HTML and CSS Presentation Demo with WebSlides by SitePoint ( @SitePoint ) on CodePen .

Et voilà! You have just created a beautiful, fully functional and responsive web presentation. But this is just the tip of the iceberg, there’s a lot more you can quickly create with WebSlides and many other WebSlides features which I didn’t cover in this short tutorial.

To learn more, explore the WebSlides Components and CSS architecture documentation , or start customizing the demos already available to you in the downloadable folder.

Then, focus on your content and let WebSlides do its job.

Frequently Asked Questions (FAQs) about Creating Beautiful HTML & CSS Presentations with WebSlides

How can i customize the design of my webslides presentation.

WebSlides allows you to customize your presentation to suit your style and needs. You can change the color scheme, fonts, and layout by modifying the CSS file. If you’re familiar with CSS, you can easily tweak the styles to create a unique look. If you’re not, there are plenty of online resources and tutorials that can help you learn. Remember, the key to a great presentation is not only the content but also the design. A well-designed presentation can help keep your audience engaged and make your content more memorable.

Can I add multimedia elements to my WebSlides presentation?

How can i share my webslides presentation with others.

Once you’ve created your WebSlides presentation, you can share it with others by hosting it on a web server. You can use a free hosting service like GitHub Pages, or you can use your own web server if you have one. Once your presentation is hosted, you can share the URL with anyone you want to view your presentation. They’ll be able to view your presentation in their web browser without needing to install any special software.

Can I use WebSlides for commercial projects?

Yes, WebSlides is free to use for both personal and commercial projects. You can use it to create presentations for your business, for your clients, or for any other commercial purpose. However, please note that while WebSlides itself is free, some of the images and fonts used in the templates may be subject to copyright and may require a license for commercial use.

How can I add interactive elements to my WebSlides presentation?

You can add interactive elements to your WebSlides presentation by using JavaScript. For example, you can add buttons that the user can click to navigate to different slides, or you can add forms that the user can fill out. This can be done by adding the appropriate HTML and JavaScript code to your slides. If you’re not familiar with JavaScript, there are plenty of online resources and tutorials that can help you learn.

Can I use WebSlides offline?

Yes, you can use WebSlides offline. Once you’ve downloaded the WebSlides files, you can create and view your presentations offline. However, please note that some features may not work offline, such as loading external images or fonts. To ensure that all features work correctly, it’s recommended to host your presentation on a web server.

How can I add transitions and animations to my WebSlides presentation?

You can add transitions and animations to your WebSlides presentation by using CSS. CSS allows you to control the appearance and behavior of elements on your slides, including transitions and animations. For example, you can use the transition property to animate the change of a property from one value to another, or you can use the animation property to create more complex animations.

Can I use WebSlides on mobile devices?

Yes, WebSlides is designed to be responsive and works well on both desktop and mobile devices. However, please note that due to the smaller screen size, some elements may not display as intended on mobile devices. It’s recommended to test your presentation on different devices to ensure that it looks and works well on all platforms.

How can I add navigation controls to my WebSlides presentation?

You can add navigation controls to your WebSlides presentation by using the built-in navigation options. You can add arrows to navigate between slides, or you can add a slide counter to show the current slide number and the total number of slides. This can be done by adding the appropriate HTML and CSS code to your slides.

Can I use WebSlides with other web development tools?

Yes, you can use WebSlides with other web development tools. For example, you can use it with a text editor to write your HTML and CSS code, or you can use it with a version control system like Git to manage your project files. You can also use it with a build tool like Gulp or Grunt to automate tasks like minifying your code or compiling your CSS.

I am a web developer/designer from Bulgaria. My favorite web technologies include SVG, HTML, CSS, Tailwind, JavaScript, Node, Vue, and React. When I'm not programming the Web, I love to program my own reality ;)

Video Slideshow using HTML CSS and Javascript

Hello friends, in this blog, I will share another interesting snippet on video slideshow HTML CSS. Here I am going to create a Video Slideshow using HTML, CSS and, Javascript. I have shared many projects on CSS animation examples, HTML CSS, javascript, bootstrap, etc on codingflicks blog. if you have time, please check those interesting projects with source code apart from this snippet. The video below is the demo of how the video slider will look like at the end of coding.

• Simple Website from Scratch
• 3D perspective Hover Animation
• Share on Facebook
• Share on Twitter

Please do not enter any spam link in the comment box.

Post a Comment

Contact form.

25+ CSS Slideshows

Slideshows are a popular way of presenting images, videos, or other content on a web page. They can be used for various purposes, such as showcasing a portfolio, displaying testimonials, highlighting products, or telling a story . Slideshows can also enhance the visual appeal and interactivity of a web page, as they can include animations, transitions, effects, and user controls .

However, creating a slideshow from scratch can be challenging and time-consuming, especially if you want to make it responsive, accessible, and compatible with different browsers and devices. Fortunately, there are many free and open-source CSS slideshow code examples that you can use as a starting point or inspiration for your own projects. These examples demonstrate the power and versatility of CSS, as they can create stunning slideshows with minimal HTML and JavaScript.

In this article, we will showcase some of the most creative and beautiful CSS slideshow code examples from CodePen, GitHub , and other resources. We will also provide a brief description of each example, as well as the link to the source code and the live demo. These examples are updated as of November 2021 collection, and include 4 new items .

Related Articles

• jQuery Slideshows
• Ryan Mulligan
• January 24, 2020
• demo and code
• HTML / CSS (SCSS)

About a code

Doggie screensaver.

Pretty hacky attempt at recreating the floating screensaver for the photo gallery.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

• December 5, 2019

CSS Slideshow

• Riley Adair
• January 1, 2018
• JavaScript/Babel

About the code

Slideshow vanilla js.

Custom slideshow with staggered transitions. Built in vanilla JS.

• Nathan Taylor
• December 16, 2017

Untitled Slider

A small experiment which quickly turned into something more.

• Bruno Carvalho
• December 5, 2017
• JavaScript/Babel (jQuery.js)

Parallax Slideshow

HTML, CSS and JS slideshow with parallax effect.

Split Slick Slideshow

Vertical slideshow in split screen. Made by Fabio Ottaviani March 29, 2017

Slideshow Presentation

Navigate using the up and down arrow keys. Made by Keith Driessen March 9, 2016

Dual Slideshow

Just playing around with a dual pane slideshow concept. Made by Jacob Davidson April 17, 2015

A Pure CSS3 Slideshow

The transition treats each part of the photo as a blind, closes them all together, and when they are open again, a new photo is revealed underneath. Made by Stathis October 3, 2013

• Johan Lagerqvist
• December 24, 2018

CSS-only Slideshow

An idea for a page header slideshow.

• November 30, 2018

Rotating Background Image Slideshow

• VERDIEU Steeve
• November 18, 2018

Slideshow with HTML/CSS

Slideshow made with HTML/CSS. Any javascript code is used.

Responsive: no

• Jefferson Lam
• October 8, 2018

Spooky Scary Clip Text

Spooky CSS only image slideshow with text clipping.

Compatible browsers: Chrome, Firefox, Opera, Safari

• Peter Butcher
• July 1, 2018

Slideshow Concept

A pure CSS and HTML slideshow concept. To add or remove slides: 1. add a new slide template in the HTML; 2. update the $slide-count SCSS variable; 3. tab colours: update the $c-slides SCSS variable 4. slide popout images: update the $b-slides SCSS variable. Use the tabs below to change slide.

• Mikael Ainalem
• January 15, 2018
• HTML + SVG / CSS / JavaScript

Silhouette Zoom Slideshow

Slide show where the person in the current frame is used to zoom into the next frame.

• October 17, 2017
• JavaScript (anime.js)

Geometrical Birds - Slideshow

83 triangles morphing and changing color into different birds.

• June 17, 2017
• CSS/PostCSS
• JavaScript (Vue.js)

Bubble Slideshow Component

This is a Vue component that uses clip-path for an interesting slideshow transition effect.

• April 19, 2017
• JavaScript (jQuery.js, TweenMax.js)

Slideshow Parallax

Slideshow Parallax with TweenMax.js

Split-Screen Slideshow

HTML, CSS and JavaScript split-screen slideshow. Made by Sean Free January 9, 2017

Only CSS Slideshow Effect

Ken Burns slideshow effect CSS only. Made by Dima December 12, 2016

Slick Slideshow With Blur Effect

Slideshow with blur effect in HTML, CSS and JavaScript. Made by Fabio Ottaviani November 11, 2016

CSS Fadeshow

This is an extended version of pure CSS slideshow gallery http://codepen.io/alexerlandsson/pen/RaZdox which comes with more and easier customisation and previous/next buttons. Made by Alexander Erlandsson October 24, 2016

• Just another Chris
• October 21, 2016
• HTML (Pug) / CSS (SCSS)

3-D Split Image Slideshow

TweenMax Slideshow

A customizable slideshow TweenMax. Made by Matheus Verissimo August 28, 2016

Nautilus Slideshow

Nautilus slideshow with HTML, CSS and JavaScript. Made by Nikolas Payne March 9, 2016

• Skip to main content
• Skip to search
• Skip to select language
• Sign up for free
• Português (do Brasil)

Video and audio content

• Overview: Multimedia and embedding

Now that we are comfortable with adding simple images to a webpage, the next step is to start adding video and audio players to your HTML documents! In this article we'll look at doing just that with the <video> and <audio> elements; we'll then finish off by looking at how to add captions/subtitles to your videos.

Video and audio on the web

The first influx of online videos and audio were made possible by proprietary plugin-based technologies like Flash and Silverlight . Both of these had security and accessibility issues, and are now obsolete, in favor of native HTML solutions <video> and <audio> elements and the availability of JavaScript APIs for controlling them. We'll not be looking at JavaScript here — just the basic foundations that can be achieved with HTML.

We won't be teaching you how to produce audio and video files — that requires a completely different skill set. We have provided you with sample audio and video files and example code for your own experimentation, in case you are unable to get hold of your own.

Note: Before you begin here, you should also know that there are quite a few OVPs (online video providers) like YouTube , Dailymotion , and Vimeo , and online audio providers like Soundcloud . Such companies offer a convenient, easy way to host and consume videos, so you don't have to worry about the enormous bandwidth consumption. OVPs even usually offer ready-made code for embedding video/audio in your webpages; if you use that route, you can avoid some of the difficulties we discuss in this article. We'll be discussing this kind of service a bit more in the next article.

The <video> element

The <video> element allows you to embed a video very easily. A really simple example looks like this:

The features of note are:

In the same way as for the <img> element, the src (source) attribute contains a path to the video you want to embed. It works in exactly the same way.

Users must be able to control video and audio playback (it's especially critical for people who have epilepsy .) You must either use the controls attribute to include the browser's own control interface, or build your interface using the appropriate JavaScript API . At a minimum, the interface must include a way to start and stop the media, and to adjust the volume.

This is called fallback content — this will be displayed if the browser accessing the page doesn't support the <video> element, allowing us to provide a fallback for older browsers. This can be anything you like; in this case, we've provided a direct link to the video file, so the user can at least access it some way regardless of what browser they are using.

The embedded video will look something like this:

You can try the example live here (see also the source code .)

Using multiple source formats to improve compatibility

There's a problem with the above example. It is possible that the video might not play for you, because different browsers support different video (and audio) formats. Fortunately, there are things you can do to help prevent this from being an issue.

Contents of a media file

First, let's go through the terminology quickly. Formats like MP3, MP4 and WebM are called container formats . They define a structure in which the audio and/or video tracks that make up the media are stored, along with metadata describing the media, what codecs are used to encode its channels, and so forth.

A WebM file containing a movie which has a main video track and one alternate angle track, plus audio for both English and Spanish, in addition to audio for an English commentary track can be conceptualized as shown in the diagram below. Also included are text tracks containing closed captions for the feature film, Spanish subtitles for the film, and English captions for the commentary.

The audio and video tracks within the container hold data in the appropriate format for the codec used to encode that media. Different formats are used for audio tracks versus video tracks. Each audio track is encoded using an audio codec , while video tracks are encoded using (as you probably have guessed) a video codec . As we talked about before, different browsers support different video and audio formats, and different container formats (like MP3, MP4, and WebM, which in turn can contain different types of video and audio).

For example:

• A WebM container typically packages Vorbis or Opus audio with VP8/VP9 video. This is supported in all modern browsers, though older versions may not work.
• An MP4 container often packages AAC or MP3 audio with H.264 video. This is also supported in all modern browsers.
• The Ogg container tends to use Vorbis audio and Theora video. This is best supported in Firefox and Chrome, but has basically been superseded by the better quality WebM format.

There are some special cases. For example, for some types of audio, a codec's data is often stored without a container, or with a simplified container. One such instance is the FLAC codec, which is stored most commonly in FLAC files, which are just raw FLAC tracks.

Another such situation is the always-popular MP3 file. An "MP3 file" is actually an MPEG-1 Audio Layer III (MP3) audio track stored within an MPEG or MPEG-2 container. This is especially interesting since while most browsers don't support using MPEG media in the <video> and <audio> elements, they may still support MP3 due to its popularity.

An audio player will tend to play an audio track directly, e.g. an MP3 or Ogg file. These don't need containers.

Media file support in browsers

Note: Several popular formats, such as MP3 and MP4/H.264, are excellent but are encumbered by patents; that is, there are patents covering some or all of the technology that they're based upon. In the United States, patents covered MP3 until 2017, and H.264 is encumbered by patents through at least 2027.

Because of those patents, browsers that wish to implement support for those codecs must pay typically enormous license fees. In addition, some people prefer to avoid restricted software and prefer to use only open formats. Due to these legal and preferential reasons, web developers find themselves having to support multiple formats to capture their entire audience.

The codecs described in the previous section exist to compress video and audio into manageable files, since raw audio and video are both exceedingly large. Each web browser supports an assortment of codecs , like Vorbis or H.264, which are used to convert the compressed audio and video into binary data and back. Each codec offers its own advantages and drawbacks, and each container may also offer its own positive and negative features affecting your decisions about which to use.

Things become slightly more complicated because not only does each browser support a different set of container file formats, they also each support a different selection of codecs. In order to maximize the likelihood that your website or app will work on a user's browser, you may need to provide each media file you use in multiple formats. If your site and the user's browser don't share a media format in common, your media won't play.

Due to the intricacies of ensuring your app's media is viewable across every combination of browsers, platforms, and devices you wish to reach, choosing the best combination of codecs and container can be a complicated task. See Choosing the right container for help selecting the container file format best suited for your needs; similarly, see Choosing a video codec and Choosing an audio codec for help selecting the first media codecs to use for your content and your target audience.

One additional thing to keep in mind: mobile browsers may support additional formats not supported by their desktop equivalents, just like they may not support all the same formats the desktop version does. On top of that, both desktop and mobile browsers may be designed to offload handling of media playback (either for all media or only for specific types it can't handle internally). This means media support is partly dependent on what software the user has installed.

So how do we do this? Take a look at the following updated example ( try it live here , also):

Here we've taken the src attribute out of the actual <video> tag, and instead included separate <source> elements that point to their own sources. In this case the browser will go through the <source> elements and play the first one that it has the codec to support. Including WebM and MP4 sources should be enough to play your video on most platforms and browsers these days.

Each <source> element also has a type attribute. This is optional, but it is advised that you include it. The type attribute contains the MIME type of the file specified by the <source> , and browsers can use the type to immediately skip videos they don't understand. If type isn't included, browsers will load and try to play each file until they find one that works, which obviously takes time and is an unnecessary use of resources.

Refer to our guide to media types and formats for help selecting the best containers and codecs for your needs, as well as to look up the right MIME types to specify for each.

Other <video> features

There are a number of other features you can include when displaying an HTML video. Take a look at our next example:

The resulting UI looks something like this:

Features include:

You can control the video size either with these attributes or with CSS . In both cases, videos maintain their native width-height ratio — known as the aspect ratio . If the aspect ratio is not maintained by the sizes you set, the video will grow to fill the space horizontally, and the unfilled space will just be given a solid background color by default.

Makes the audio or video start playing right away, while the rest of the page is loading. You are advised not to use autoplaying video (or audio) on your sites, because users can find it really annoying.

Makes the video (or audio) start playing again whenever it finishes. This can also be annoying, so only use if really necessary.

Causes the media to play with the sound turned off by default.

The URL of an image which will be displayed before the video is played. It is intended to be used for a splash screen or advertising screen.

Used for buffering large files; it can take one of three values:

• "none" does not buffer the file
• "auto" buffers the media file
• "metadata" buffers only the metadata for the file

You can find the above example available to play live on GitHub (also see the source code .) Note that we haven't included the autoplay attribute in the live version — if the video starts to play as soon as the page loads, you don't get to see the poster!

The <audio> element

The <audio> element works just like the <video> element, with a few small differences as outlined below. A typical example might look like so:

This produces something like the following in a browser:

Note: You can run the audio demo live on GitHub (also see the audio player source code .)

This takes up less space than a video player, as there is no visual component — you just need to display controls to play the audio. Other differences from HTML video are as follows:

• The <audio> element doesn't support the width / height attributes — again, there is no visual component, so there is nothing to assign a width or height to.
• It also doesn't support the poster attribute — again, no visual component.

Other than this, <audio> supports all the same features as <video> — review the above sections for more information about them.

Displaying video text tracks

Now we'll discuss a slightly more advanced concept that is really useful to know about. Many people can't or don't want to hear the audio/video content they find on the Web, at least at certain times. For example:

• Many people have auditory impairments (such as being hard of hearing or deaf) so can't hear the audio clearly if at all.
• Others may not be able to hear the audio because they are in noisy environments (like a crowded bar when a sports game is being shown).
• Similarly, in environments where having the audio playing would be a distraction or disruption (such as in a library or when a partner is trying to sleep), having captions can be very useful.
• People who don't speak the language of the video might want a text transcript or even translation to help them understand the media content.

Wouldn't it be nice to be able to provide these people with a transcript of the words being spoken in the audio/video? Well, thanks to HTML video, you can. To do so we use the WebVTT file format and the <track> element.

Note: "Transcribe" means "to write down spoken words as text." The resulting text is a "transcript."

WebVTT is a format for writing text files containing multiple strings of text along with metadata such as the time in the video at which each text string should be displayed, and even limited styling/positioning information. These text strings are called cues , and there are several kinds of cues which are used for different purposes. The most common cues are:

Translations of foreign material, for people who don't understand the words spoken in the audio.

Synchronized transcriptions of dialog or descriptions of significant sounds, to let people who can't hear the audio understand what is going on.

Text which should be spoken by the media player in order to describe important visuals to blind or otherwise visually impaired users.

A typical WebVTT file will look something like this:

To get this displayed along with the HTML media playback, you need to:

• Save it as a .vtt file in a sensible place.
• Link to the .vtt file with the <track> element. <track> should be placed within <audio> or <video> , but after all <source> elements. Use the kind attribute to specify whether the cues are subtitles , captions , or descriptions . Further, use srclang to tell the browser what language you have written the subtitles in. Finally, add label to help readers identify the language they are searching for.

Here's an example:

This will result in a video that has subtitles displayed, kind of like this:

For more details, including on how to add labels please read Adding captions and subtitles to HTML video . You can find the example that goes along with this article on GitHub, written by Ian Devlin (see the source code too.) This example uses some JavaScript to allow users to choose between different subtitles. Note that to turn the subtitles on, you need to press the "CC" button and select an option — English, Deutsch, or Español.

Note: Text tracks also help you with SEO , since search engines especially thrive on text. Text tracks even allow search engines to link directly to a spot partway through the video.

Active learning: Embedding your own audio and video

For this active learning, we'd (ideally) like you to go out into the world and record some of your own video and audio — most phones these days allow you to record audio and video very easily and, provided you can transfer it on to your computer, you can use it. You may have to do some conversion to end up with a WebM and MP4 in the case of video, and an MP3 and Ogg in the case of audio, but there are enough programs out there to allow you to do this without too much trouble, such as Miro Video Converter and Audacity . We'd like you to have a go!

If you are unable to source any video or audio, then you can feel free to use our sample audio and video files to carry out this exercise. You can also use our sample code for reference.

We would like you to:

• Save your audio and video files in a new directory on your computer.
• Create a new HTML file in the same directory, called index.html .
• Add <audio> and <video> elements to the page; make them display the default browser controls.
• Give both of them <source> elements so that browsers will find the audio format they support best and load it. These should include type attributes.
• Give the <video> element a poster that will be displayed before the video starts to be played. Have fun creating your own poster graphic.

For an added bonus, you could try researching text tracks, and work out how to add some captions to your video.

Test your skills!

You've reached the end of this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see Test your skills: Multimedia and embedding . Note that the third assessment question in this test assumes knowledge of some of the techniques covered in the next article , so you may want to read that before attempting it.

And that's a wrap — we hope you had fun playing with video and audio in web pages! In the next article, we'll look at other ways of embedding content on the Web, using technologies like <iframe> and <object> .

• The HTML media elements: <audio> , <video> , <source> , and <track>
• Adding captions and subtitles to video
• Audio and Video delivery : A LOT of detail about putting audio and video onto web pages using HTML and JavaScript.
• Audio and Video manipulation : A LOT of detail about manipulating audio and video using JavaScript (for example adding filters.)
• Web media technologies
• Guide to media types and formats on the web
• Event reference > Media

Create beautiful stories

WebSlides makes HTML presentations easy. Just the essentials and using lovely CSS.

WebSlides 1.5.0 Github

Why WebSlides?

Good karma & Productivity.

An opportunity to engage.

WebSlides is about good karma. This is about telling the story, and sharing it in a beautiful way. HTML and CSS as narrative elements.

Work better, faster.

Designers, marketers, and journalists can now focus on the content. Simply choose a demo and customize it in minutes.

WebSlides is really easy

Each parent <section> in the #webslides element is an individual slide.

Code is clean and scalable. It uses intuitive markup with popular naming conventions. There's no need to overuse classes or nesting. Making an HTML presentation has never been so fast .

→ Simple Navigation

Slide counter, 40 + beautiful components, vertical rhythm, 500 + svg icons, webslides demos.

Contribute on Github . View all ›

If you need help, here's just some tutorials. Just a basic knowledge of HTML is required:

• Components · Classes .
• WebSlides on Codepen .
• WebSlides Media: images, videos...

Built to expand

The best way to inspire with your content is to connect on a personal level:

• Background images: Unsplash .
• CSS animations: Animate.css .
• Longforms: Animate on scroll .

Ready to Start?

Create your own stories instantly. 120+ premium slides ready to use.

Free Download Pay what you want.

People share content that makes them feel inspired. WebSlides is a very effective way to engage young audiences, customers, and teams.

@jlantunez , @ant_laguna , and @luissacristan .

Navigation Menu

Search code, repositories, users, issues, pull requests..., provide feedback.

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly.

To see all available qualifiers, see our documentation .

• Notifications

Presentation Slides for Developers

slidevjs/slidev

Folders and files, repository files navigation.

Presentation slide s for dev elopers 🧑‍💻👩‍💻👨‍💻

Video Preview | Documentation

• 📝 Markdown-based - use your favorite editors and workflow
• 🧑‍💻 Developer Friendly - built-in syntax highlighting, live coding, etc.
• 🎨 Themable - theme can be shared and used with npm packages.
• 🌈 Stylish - on-demand utilities via UnoCSS .
• 🤹 Interactive - embedding Vue components seamlessly.
• 🎙 Presenter Mode - use another window, or even your phone to control your slides.
• 🧮 LaTeX - built-in LaTeX math equations support.
• 📰 Diagrams - creates diagrams with textual descriptions
• 🌟 Icons - access to icons from any iconset directly.
• 💻 Editors - integrated editor, or extension for VS Code
• 🎥 Recording - built-in recording and camera view.
• 📤 Portable - export into PDF, PNGs, or even a hostable SPA.
• ⚡️ Fast - instant reloading powered by Vite .
• 🛠 Hackable - using Vite plugins, Vue components, or any npm packages.

Getting Started

Try it online ⚡️.

sli.dev/new

Code of conduct

Releases 327, sponsor this project, contributors 229.

• TypeScript 68.4%
• JavaScript 2.6%

How-To Geek

6 ways to create more interactive powerpoint presentations.

Engage your audience with cool, actionable features.

Quick Links

• Add a QR code
• Embed Microsoft Forms (Education or Business Only)
• Embed a Live Web Page
• Add Links and Menus
• Add Clickable Images to Give More Info
• Add a Countdown Timer

We've all been to a presentation where the speaker bores you to death with a mundane PowerPoint presentation. Actually, the speaker could have kept you much more engaged by adding some interactive features to their slideshow. Let's look into some of these options.

1. Add a QR code

Adding a QR code can be particularly useful if you want to direct your audience to an online form, website, or video.

Some websites have in-built ways to create a QR code. For example, on Microsoft Forms , when you click "Collect Responses," you'll see the QR code option via the icon highlighted in the screenshot below. You can either right-click the QR code to copy and paste it into your presentation, or click "Download" to add it to your device gallery to insert the QR code as a picture.

In fact, you can easily add a QR code to take your viewer to any website. On Microsoft Edge, right-click anywhere on a web page where there isn't already a link, and left-click "Create QR Code For This Page."

You can also create QR codes in other browsers, such as Chrome.

You can then copy or download the QR code to use wherever you like in your presentation.

2. Embed Microsoft Forms (Education or Business Only)

If you plan to send your PPT presentation to others—for example, if you're a trainer sending step-by-step instruction presentation, a teacher sending an independent learning task to your students, or a campaigner for your local councilor sending a persuasive PPT to constituents—you might want to embed a quiz, questionnaire, pole, or feedback survey in your presentation.

In PowerPoint, open the "Insert" tab on the ribbon, and in the Forms group, click "Forms". If you cannot see this option, you can add new buttons to the ribbon .

As at April 2024, this feature is only available for those using their work or school account. We're using a Microsoft 365 Personal account in the screenshot below, which is why the Forms icon is grayed out.

Then, a sidebar will appear on the right-hand side of your screen, where you can either choose a form you have already created or opt to craft a new form.

Now, you can share your PPT presentation with others , who can click the fields and submit their responses when they view the presentation.

3. Embed a Live Web Page

You could always screenshot a web page and paste that into your PPT, but that's not a very interactive addition to your presentation. Instead, you can embed a live web page into your PPT so that people with access to your presentation can interact actively with its contents.

To do this, we will need to add an add-in to our PPT account .

Add-ins are not always reliable or secure. Before installing an add-in to your Microsoft account, check that the author is a reputable company, and type the add-in's name into a search engine to read reviews and other users' experiences.

To embed a web page, add the Web Viewer add-in ( this is an add-in created by Microsoft ).

Go to the relevant slide and open the Web Viewer add-in. Then, copy and paste the secure URL into the field box, and remove https:// from the start of the address. In our example, we will add a selector wheel to our slide. Click "Preview" to see a sample of the web page's appearance in your presentation.

This is how ours will look.

When you or someone with access to your presentation views the slideshow, this web page will be live and interactive.

4. Add Links and Menus

As well as moving from one slide to the next through a keyboard action or mouse click, you can create links within your presentation to direct the audience to specific locations.

To create a link, right-click the outline of the clickable object, and click "Link."

In the Insert Hyperlink dialog box, click "Place In This Document," choose the landing destination, and click "OK."

What's more, to make it clear that an object is clickable, you can use action buttons. Open the "Insert" tab on the ribbon, click "Shape," and then choose an appropriate action button. Usefully, PPT will automatically prompt you to add a link to these shapes.

You might also want a menu that displays on every slide. Once you have created the menu, add the links using the method outlined above. Then, select all the items, press Ctrl+C (copy), and then use Ctrl+V to paste them in your other slides.

5. Add Clickable Images to Give More Info

Through PowerPoint's animations, you can give your viewer the power to choose what they see and when they see it. This works nicely whether you're planning to send your presentation to others to run through independently or whether you're presenting in front of a group and want your audience to decide which action they want to take.

Start by creating the objects that will be clickable (trigger) and the items that will appear (pop-up).

Then, select all the pop-ups together. When you click "Animations" on the ribbon and choose an appropriate animation for the effect you want to achieve, this will be applied to all objects you have selected.

The next step is to rename the triggers in your presentation. To do this, open the "Home" tab, and in the Editing group, click "Select", and then "Selection Pane."

With the Selection Pane open, select each trigger on your slide individually, and rename them in the Selection Pane, so that they can be easily linked to in the next step.

Finally, go back to the first pop-up. Open the "Animations" tab, and in the Advanced Animation group, click the "Trigger" drop-down arrow. Then, you can set the item to appear when a trigger is clicked in your presentation.

If you want your item to disappear when the trigger is clicked again, select the pop-up, click "Add Animation" in the Advanced Animation group, choose an Exit animation, and follow the same step to link that animation to the trigger button.

6. Add a Countdown Timer

A great way to get your audience to engage with your PPT presentation is to keep them on edge by adding a countdown timer. Whether you're leading a presentation and want to let your audience stop to discuss a topic, or running an online quiz with time-limit questions, having a countdown timer means your audience will keep their eye on your slide throughout.

To do this, you need to animate text boxes or shapes containing your countdown numbers. Choose and format a shape and type the highest number that your countdown clock will need. In our case, we're creating a 10-second timer.

Now, with your shape selected, open the "Animations" tab on the ribbon and click the animation drop-down arrow. Then, in the Exit menu, click "Disappear."

Open the Animation Pane, and click the drop-down arrow next to the animation you've just added. From there, choose "Timing."

Make sure "On Click" is selected in the Start menu, and change the Delay option to "1 second," before clicking "OK."

Then, with this shape still selected, press Ctrl+C (copy), and then Ctrl+V (paste). In the second box, type 9 . With the Animation Pane still open and this second shape selected, click the drop-down arrow and choose "Timing" again. Change the Start option to "After Previous," and make sure the Delay option is 1 second. Then, click "OK."

We can now use this second shape as our template, as when we copy and paste it again, the animations will also duplicate. With this second shape selected, press Ctrl+C and Ctrl+V, type 8 into the box, and continue to do the same until you get to 0 .

Next, remove the animations from the "0" box, as you don't want this to disappear. To do this, click the shape, and in the Animation Pane drop-down, click "Remove."

You now need to layer them in order. Right-click the box containing number 1, and click "Bring To Front." You will now see that box on the top. Do the same with the other numbers in ascending order.

Finally, you need to align the objects together. Click anywhere on your slide and press Ctrl+A. Then, in the Home tab on the ribbon, click "Arrange." First click "Align Center," and then bring the menu up again, so that you can click "Align Middle."

Press Ctrl+A again to select your timer, and you can then move your timer or copy and paste it elsewhere.

Press F5 to see the presentation in action, and when you get to the slide containing the timer, click anywhere on the slide to see your countdown timer in action!

Now that your PPT presentation is more interactive, make sure you've avoided these eight common presentational mistakes before you present your slides.

City of Holyoke to offer “how-to” presentation on obtaining Certificate of Inspection

• Published: May. 21, 2024, 2:55 p.m.

Holyoke City Hall. (Hoang 'Leon' Nguyen / The Repubican)

• The Republican Newsroom

Holyoke - The City’s Building Department will give a presentation on the steps required to obtain a Certificate of Inspection on Thursday, May 23, 6 p.m. The presentation - a short tutorial followed by Q&A - will be held at Holyoke Media on Suffolk Street.

Though open to the public, the one-hour session is designed for owners, property managers, and landlords of all multi-unit buildings with 3 or more units.

For more information, contact the Holyoke Building Department at 413-322-5600.

If you purchase a product or register for an account through a link on our site, we may receive compensation. By using this site, you consent to our User Agreement and agree that your clicks, interactions, and personal information may be collected, recorded, and/or stored by us and social media and other third-party partners in accordance with our Privacy Policy.

• Share full article

‘High-Functioning Anxiety Isn’t a Medical Diagnosis. It’s a Hashtag.’

Supported by

By Lucy Foulkes

Video by Amanda Su and Adam Westbrook

Ms. Foulkes is an academic psychologist at Oxford University. Ms. Su is an Opinion Video reporting fellow. Mr. Westbrook is an editor and producer with Opinion Video.

Soaring rates of anxiety and depression among adolescents . Medical groups declaring a “national emergency.” The surgeon general calling for an “all of society” response to a “devastating” mental health crisis among young people.

By all indications, kids these days are in rough shape, giving additional urgency to Mental Health Awareness Month, which began on May 1. But in the Opinion video above, Lucy Foulkes, an academic psychologist at Oxford University, argues that the problem may not be a lack of awareness but rather too much.

Amid an enormous societal push to destigmatize mental illness and encourage more conversation about emotions, young people have been flooded with mental health information on social media and elsewhere. But much of it is unreliable and counterproductive.

“I’m deeply concerned that this awareness craze,” Foulkes says, “is ironically making their mental health worse.”

Adam Westbrook is a producer and editor with Opinion Video.

Opinion Video combines original reporting with creative storytelling to produce visually transformative commentary. Pitch a video Guest Essay here.

The Times is committed to publishing a diversity of letters to the editor. We’d like to hear what you think about this or any of our articles. Here are some tips . And here’s our email: [email protected] .

Follow the New York Times Opinion section on Facebook , Instagram , TikTok , WhatsApp , X and Threads .

Amanda Su is a reporter for the Opinion Video department of The New York Times and is a member of the 2023-24 class of Times fellows, a program for journalists early in their career.

Advertisement

Officer who arrested Scottie Scheffler disciplined for not having bodycam activated

• Updated: May. 23, 2024, 11:33 a.m. |
• Published: May. 23, 2024, 11:30 a.m.
• Dylan Lovan | Associated Press

LOUISVILLE — The Kentucky police officer who arrested top-ranked golfer Scottie Scheffler outside the PGA Championship is receiving “corrective action” for not having his body-worn camera activated when he approached the golfer’s vehicle — an interaction that allegedly resulted in the officer being dragged to the ground, authorities said Thursday.

Louisville officials said during a news conference that they are not aware of any video footage of the initial interaction last Friday between Scheffler and Louisville Detective Bryan Gillis outside the gates of Valhalla Golf Club on a dark and rainy morning. But Gillis wrote in a report on his failure to turn on the camera that Scheffler “demanded to be let in and proceeded forward ... I was dragged/knocked down by the driver.”

Police did release video Thursday from a street pole camera that appears to show Scheffler’s SUV turning into the golf club entrance, prompting an officer to run toward the vehicle and seemingly strike it as it comes to a stop. The camera is too far away to capture the full details of the encounter.

New footage from Scottie Scheffler's arrest at last week's PGA Championship. 🎥 pic.twitter.com/EoAvugPGgC — Golf Digest (@GolfDigest) May 23, 2024

If you purchase a product or register for an account through a link on our site, we may receive compensation. By using this site, you consent to our User Agreement and agree that your clicks, interactions, and personal information may be collected, recorded, and/or stored by us and social media and other third-party partners in accordance with our Privacy Policy.

How TO - Fullscreen Video

Learn how to create a full screen video background with CSS.

Fullscreen Video Background

Learn how to create a full screen video background that covers the entire browser window:

How To Create a Fullscreen Video

Step 1) add html:, step 2) add css:.

Advertisement

Step 3) Add JavaScript:

Optionally, you can add JavaScript to pause/play the video with a click of a button:

COLOR PICKER

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail: [email protected]

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail: [email protected]

Top Tutorials

Top references, top examples, get certified.

OpenAI's big event: CTO Mira Murati announces GPT-4o, which gives ChatGPT a better voice and eyes

• OpenAI's "Spring Update" revealed new updates to ChatGPT.
• OpenAI CTO Mira Murati kicked off the event.
• She announced GPT-4o, its next flagship AI model, with improved voice and vision capabilities.

OpenAI just took the wraps off a big new update to ChatGPT.

Cofounder and CEO Sam Altman had teased "new stuff" coming to ChatGPT and GPT-4 , the AI model that powers its chatbot, and told his followers to tune in Monday at 1 p.m. ET for its "Spring Update" to learn more.

Also ahead of time, Altman ruled that the event would reveal GPT-5 or a new OpenAI search engine, which is reportedly in the works. OpenAI is reportedly planning to eventually take on internet search giant Google with its own AI-powered search product.

But the big news on Monday was OpenAI's new flagship AI model, GPT-4o, which will be free to all users and "can reason across audio, vision, and text in real time." It was CTO Mira Murati who delivered the updates with no appearance on the livestream from Altman.

There were a ton of demos intended to demonstrate the real-time smarts of GPT-4o.

OpenAI researchers showed how the new ChatGPT can quickly translate speech and help with basic linear algebra using its visual capabilities. The use of the tech on school assignments has been a polarizing topic in education since it first launched.

Say hello to GPT-4o, our new flagship model which can reason across audio, vision, and text in real time: https://t.co/MYHZB79UqN Text and image input rolling out today in API and ChatGPT with voice and video in the coming weeks. pic.twitter.com/uuthKZyzYx — OpenAI (@OpenAI) May 13, 2024

OpenAI posted another example to X of how one can interact with the new ChatGPT bot. It resembled a video call, and it got pretty meta.

In the video, ChatGPT takes in the room around it, discerns it's a recording setup, figures it might have something to do with OpenAI since the user is wearing a hoodie, and then gets told that the announcement has to do with the AI — it is the AI. It reacts with a voice that sounds more emotive.

OpenAI also announced the desktop version of ChatGPT, and a new and improved user interface.

In addition to GPT-4o and ChatGPT, OpenAI's other products include its AI-powered image generator DALL-E , its unreleased text-to-video generator Sora , and its GPT app store.

You can catch up on our liveblog of the event below.

That’s a wrap! OpenAI concludes the event without an appearance from Altman.

OpenAI says text and image input for GPT-4o-powered ChatGPT is launching today. Meanwhile, voice and video options will drop in the coming weeks, the company said.

Although Altman didn't step in front of the camera, the CEO posted videos from the audience on X.

He also teases "more stuff to share soon."

GPT-4o can also break down charts

The new AI model can interact with code bases, the OpenAI execs say. The next demo shows it analyzing a chart from some data.

It's a plot of global temperatures. GPT-4o gives some takeaways from what it sees, and CTO Mira Murati asks about the Y axis, which the AI explains.

ChatGPT reads human emotions — with a stumble

For the last live demo of the day, Zoph holds his phone up to his face and asks ChatGPT to tell him how he looks. Initially, it identifies him as a "wooden surface" — a reference to an earlier photo he had shared.

But after a second try, the model gives a better answer.

"It looks like you're feeling pretty happy and cheerful," ChatGPT says, noting the small smile on Zoph's face.

In one of the final tests, ChatGPT becomes a translator

In response to a request from an X user, Murati speaks to ChatGPT in Italian.

In turn, the bot translates her query into English for Zoph and Chen.

"Mike, she wonders if whales could talk, what would they tell us?" she said in English after hearing Murati's Italian.

It's pretty impressive.

The video demo shows how it could help with math homework, including basic linear algebra

OpenAI Research Lead Barret Zoph walks through an equation on a whiteboard (3x+1=4), and ChatGPT gives him hints as he finds the value of x — making it basically a real-time math tutor.

At the beginning, the bot jumped the gun.

"Whoops, I got too excited," it said after it tried to solve the math problem hadn't been uploaded yet.

But it then walked him through each step, recognizing his written work as he tried to solve the equation.

It was able to recognize math symbols, and even a heart.

OpenAI's first demo: Talking to GPT-4o

It's demo time!

The new bot has a voice that sounds like an American female, but no word yet if you can change it.

OpenAI Research Lead Mark Chen pulled out ChatGPT on his phone and asks for advice on giving a live presentation using Voice Mode.

"Mark, you're not a vacuum cleaner," it responds when he hyperventilates, appearing to perceive his nervousness. It then tells him to moderate his breathing.

Some big changes, you can interrupt the AI now, and there shouldn't be the usual 2 or 3-second delay with GPT-4o.

It can also detect emotion, according to OpenAI.

GPT-4o will have improved voice capabilities

Murati emphasizes the necessity of safety with the real-time voice and audio capabilities of the new GPT-4o model.

She says OpenAI is "continuing our iterative deployment to bring all the capabilities to you."

Murati says the big news is a "new flagship model" called GPT-4o.

The new model is called GPT-4o, and Murati says that OpenAI is making a "huge step forward" with ease of use with the new model.

It's free for users, and "allows us to bring GPT-4 class intelligence to our free users," Murati says.

And we're off!

The livestream began with CTO Mira Murati at OpenAI's offices.

OpenAI is going to be announcing 3 things today, she says. "That's it."

For those who want to watch live, you can view the whole event here.

OpenAI will be livestreaming its spring update, which kicks off in less than an hour.

Axel Springer, Business Insider's parent company, has a global deal to allow OpenAI to train its models on its media brands' reporting.

• Main content