JQuery YouTube Playlist
How do I make an jquery youtube playlist?
Trying to Crease a simple YouTube playlist with jQuery.In progress. What is a jquery youtube playlist? How do you make a jquery youtube playlist? This script and codes were developed by Matt Edwards on 12 August 2022, Friday.
JQuery YouTube Playlist - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>jQuery YouTube Playlist</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="page"> <div class="video-object"> <img src="http://img.youtube.com/vi/dXDSzYu_bwc/0.jpg"></img> </div> <div class="videos"> <ul> <li><img data-vid="dXDSzYu_bwc" src="http://img.youtube.com/vi/dXDSzYu_bwc/0.jpg"></img></li> <li><img data-vid="j3AOIYLszJw" src="http://img.youtube.com/vi/j3AOIYLszJw/0.jpg"></img></li> <li><img data-vid="mPd44Zz6etI" src="http://img.youtube.com/vi/mPd44Zz6etI/0.jpg"></img></li> <li><img data-vid="QTw1iuUi6i4" src="http://img.youtube.com/vi/QTw1iuUi6i4/0.jpg"></img></li> <li><img data-vid="kj-ch_yJaF0" src="http://img.youtube.com/vi/kj-ch_yJaF0/0.jpg"></img></li> <li><img data-vid="riPN9DbO9Rg" src="http://img.youtube.com/vi/riPN9DbO9Rg/0.jpg"></img></li> </ul> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
JQuery YouTube Playlist - Script Codes CSS Codes
* { box-sizing:border-box;
}
.page { background:#efefef; width:600px; padding:20px;
}
.video-object { width:100%; background: #111; padding:0; margin:0;
}
.video-object img { width:100%; height:auto;
}
.videos { padding: 20px;
}
.videos:after { content:""; clear:both; display:table;
}
.videos li { float: left; list-style:none; width: 120px; height: 80px; background:tomato; margin: 5px; overflow:hidden;
}
.videos li img { width:100%;
}
JQuery YouTube Playlist - Script Codes JS Codes
thumbs = $('.videos li img');
$(thumbs).click(function(){ vid = $(this).data("vid"); vid = 'http://img.youtube.com/vi/' + vid + '/0.jpg'; $('.video-object img').attr('src',vid);
});
Developer | Matt Edwards |
Username | mtedwards |
Uploaded | August 12, 2022 |
Rating | 3 |
Size | 2,120 Kb |
Views | 74,888 |
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!
Name | Size |
Quiz | 2,814 Kb |
Css Skew background for triangular overlay | 2,636 Kb |
JQuery Star flashing effect | 2,487 Kb |
JQuery lesson from Treehouse | 3,137 Kb |
Angular Instagram test | 2,396 Kb |
Let it Rain | 2,746 Kb |
A Quiz, reveal answers and keep score | 3,189 Kb |
A Pen by Matt Edwards | 1,700 Kb |
JQuery featured gallery | 7,630 Kb |
Calendar | 3,834 Kb |
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!
Name | Username | Size |
Animated bar chart | CreativePunch | 3,124 Kb |
Direction-icon | Alexandremasy | 3,323 Kb |
Animated Vertical CSS3 Menu Black | MaCeLMp4 | 2,750 Kb |
Blog demo to use given styling | Andygirl | 2,412 Kb |
CSS Grid Test | Ajaykarwal | 2,377 Kb |
Voting App - register | MatheusLima92 | 1,948 Kb |
Tab Menus | Zephyr | 3,180 Kb |
CSS Org Chart | Appirio-ux | 3,882 Kb |
Vertically rotating text with CSS | Nopr | 2,141 Kb |
Save for later... | Victorfreire | 1,359 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!