Playing a video when you click

Developer
Shaunalynn
Size
1,774 Kb
Views
2,024
  1. Playing a video when you click Previews
  2. Playing a video when you click HTML Codes
  3. Playing a video when you click CSS Codes
  4. Playing a video when you click JS Codes

How do I make an playing a video when you click?

What is a playing a video when you click? How do you make a playing a video when you click? This script and codes were developed by Shaunalynn on 30 January 2023, Monday.

Playing a video when you click Previews
IQ Test

Playing a video when you click - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>playing a video when you click</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="card" id="card1"> <h2>click on the play button to play</h2> <video src="https://s3.amazonaws.com/kpomes/media/clifftop/flatfoot1.mov" controls> </video>
</div>
<div class="card" id="card2"> <h2>click anywhere in the pink box to play</h2> <video src="https://s3.amazonaws.com/kpomes/media/clifftop/flatfoot1.mov"> </video>
</div> <script src="js/index.js"></script>
</body>
</html>

Playing a video when you click - Script Codes CSS Codes

.card { float:left; padding:2em;
}
#card1 { background-color:#ccc;
}
#card2 { background-color:pink;
}

Playing a video when you click - Script Codes JS Codes

var card2 = document.getElementById('card2');
var card2vid = document.querySelectorAll('#card2 video')[0];
card2.addEventListener('click', function() { card2vid.play();
})
Playing a video when you click - Script Codes
Playing a video when you click - Script Codes
Home Page Home
Developer Shaunalynn
Username duffles
Uploaded January 30, 2023
Rating 3
Size 1,774 Kb
Views 2,024
Do you need developer help for Playing a video when you click?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Shaunalynn (duffles) Script Codes
Name
A Pen by shaunalynn
Shaunalynn Duffy
Linking a picture from github
Template Bio Page for Creative Coding
Alec Resnick
Molly Josephs
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!