ThisIsMyJam Player

Developer
Mitch Pruitt
Size
5,945 Kb
Views
14,168
  1. ThisIsMyJam Player Previews
  2. ThisIsMyJam Player HTML Codes
  3. ThisIsMyJam Player CSS Codes
  4. ThisIsMyJam Player JS Codes

How do I make an thisismyjam player?

Practicing API calls with This Is My Jam. Enter a username to return basic user and jam details. Click on Jam image to launch jam video.. What is a thisismyjam player? How do you make a thisismyjam player? This script and codes were developed by Mitch Pruitt on 08 November 2022, Tuesday.

ThisIsMyJam Player Previews
IQ Test

ThisIsMyJam Player - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>ThisIsMyJam Player</title> <meta name='viewport' content='width=device-width'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ /* Imports */
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
/* FUCK BOX MODEL */
* { box-sizing: border-box;
}
/* VARIBLES */
.preload * { transition: none !important;
}
body { background-image: url(https://subtlepatterns.com/patterns/escheresque_ste.png);
}
/* STRUCTURE */
#flexy { height: 100vh; width: 100vw; display: flex; justify-content: center; align-items: center;
}
article { width: 20em; height: auto; margin: auto; border-radius: .5em; overflow: hidden; box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.6);
}
.branding { padding: .5em; background-color: #ffff03; font: 800 2em "OpenSans"; text-align: center; text-transform: uppercase;
}
.results { background-color: #f8f8f8;
}
.results .jam { position: relative; overflow: hidden;
}
.results .jam .jamvatar { height: 20em;
}
.results .jam .jamvatar .play { position: absolute; width: 100%; font: 600 4em/5em "OpenSans"; text-align: center; color: white; opacity: .5; transition: ease-in-out .25s;
}
.results .jam .jamvatar img { display: block; max-width: 100%; height: auto;
}
.results .jam .jamvatar:hover .play { opacity: .75;
}
.results .jam .avatar { position: absolute; top: 0; width: 100%; padding: .6em; overflow: auto; transition: ease-in-out .25s;
}
.results .jam .avatar img { float: left; margin-right: 1em; border-radius: 50%; border: .125em solid white;
}
.results .jam .avatar p { font: 600 1.5em/2 "OpenSans"; color: white; text-shadow: 1px 1px 2px #8C8C8C;
}
.results .jam .details { position: absolute; bottom: 0; width: 100%; padding: .5em; background-color: rgba(0, 0, 0, 0.5); color: white; transition: ease-in-out .25s;
}
.results .jam .details h2 { font: 600 0.85em "OpenSans";
}
.results .jam .details h3 { font: 400 0.7em "OpenSans";
}
.results:hover .avatar, .results:hover .details { opacity: 0;
}
.results:hover .avatar { top: -.5em;
}
.results:hover .details { bottom: -.5em;
}
.entry { background-color: #ececec; padding: 1em;
}
.entry input { width: 100%; appearance: none; border: 0; outline: none; height: 2em;
}
.entry input[type=text] { margin-bottom: .5em; padding-left: .5em; font: 300 1em "OpenSans";
}
.entry input[type=submit] { font: 100 1em "OpenSans"; background: #606060; border-radius: .25em; transition: ease-in-out .25s; cursor: pointer; color: white;
}
.entry input[type=submit]:hover { background: #232323;
}
#lean_overlay { position: fixed; z-index: 100; top: 0px; left: 0px; height: 100%; width: 100%; background: #000; display: none;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div id="flexy"> <article class="preload"> <section class="branding"> <h1>this is my jam</h1> </section> <section class="results"> <div class="jam"> <div class="jamvatar"> <a id="video" href="https://www.youtube.com/embed/hTfu5Hy01Vk?html5=1&rel=0&autoplay=1"> <span class="play">&#9658;</span><img src="http://fillmurray.com/395/395"> </a> </div> <div class="avatar"> <img src="http://www.fillmurray.com/50/50"> <p>Bill Murray</p> </div> <div class="details"> <h2>Don't Murray Baby</h2> <h3>William and the Murraytones</h3> </div> </div> </section> <section class="entry"> <form> <input type="text" id="username" name="username" placeholder="Enter username, e.g. mitchdot" autofocus> <input type="submit" value="Get that jam!"> </form> </section> </article>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/helpers/jquery.fancybox-media.js"></script>
<script src="https://github.com/rpheath/searchbox/blob/master/searchbox.js"></script> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.js'></script> <script src="js/index.js"></script>
</body>
</html>

ThisIsMyJam Player - Script Codes CSS Codes

/* Imports */
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
/* FUCK BOX MODEL */
* { box-sizing: border-box;
}
/* VARIBLES */
.preload * { transition: none !important;
}
body { background-image: url(https://subtlepatterns.com/patterns/escheresque_ste.png);
}
/* STRUCTURE */
#flexy { height: 100vh; width: 100vw; display: flex; justify-content: center; align-items: center;
}
article { width: 20em; height: auto; margin: auto; border-radius: .5em; overflow: hidden; box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.6);
}
.branding { padding: .5em; background-color: #ffff03; font: 800 2em "OpenSans"; text-align: center; text-transform: uppercase;
}
.results { background-color: #f8f8f8;
}
.results .jam { position: relative; overflow: hidden;
}
.results .jam .jamvatar { height: 20em;
}
.results .jam .jamvatar .play { position: absolute; width: 100%; font: 600 4em/5em "OpenSans"; text-align: center; color: white; opacity: .5; transition: ease-in-out .25s;
}
.results .jam .jamvatar img { display: block; max-width: 100%; height: auto;
}
.results .jam .jamvatar:hover .play { opacity: .75;
}
.results .jam .avatar { position: absolute; top: 0; width: 100%; padding: .6em; overflow: auto; transition: ease-in-out .25s;
}
.results .jam .avatar img { float: left; margin-right: 1em; border-radius: 50%; border: .125em solid white;
}
.results .jam .avatar p { font: 600 1.5em/2 "OpenSans"; color: white; text-shadow: 1px 1px 2px #8C8C8C;
}
.results .jam .details { position: absolute; bottom: 0; width: 100%; padding: .5em; background-color: rgba(0, 0, 0, 0.5); color: white; transition: ease-in-out .25s;
}
.results .jam .details h2 { font: 600 0.85em "OpenSans";
}
.results .jam .details h3 { font: 400 0.7em "OpenSans";
}
.results:hover .avatar, .results:hover .details { opacity: 0;
}
.results:hover .avatar { top: -.5em;
}
.results:hover .details { bottom: -.5em;
}
.entry { background-color: #ececec; padding: 1em;
}
.entry input { width: 100%; appearance: none; border: 0; outline: none; height: 2em;
}
.entry input[type=text] { margin-bottom: .5em; padding-left: .5em; font: 300 1em "OpenSans";
}
.entry input[type=submit] { font: 100 1em "OpenSans"; background: #606060; border-radius: .25em; transition: ease-in-out .25s; cursor: pointer; color: white;
}
.entry input[type=submit]:hover { background: #232323;
}
#lean_overlay { position: fixed; z-index: 100; top: 0px; left: 0px; height: 100%; width: 100%; background: #000; display: none;
}

ThisIsMyJam Player - Script Codes JS Codes

$(document).ready(function() { // Prevents animations from firing on page load $("article").removeClass("preload"); // Submits request for data $("form").submit(function(e) { e.preventDefault(); //Gets username var jamUserName = $("#username").val(); //Creates API URL var jamURL = "http://api.thisismyjam.com/1/" + jamUserName + ".json"; //Hits API, returns data $.getJSON(jamURL, function(jamData) { // Username $(".avatar p").hide().html(jamData.person.name).fadeIn("slow"); // Avatar (small) $(".avatar img").hide().attr('src', jamData.person.avatarSmall).fadeIn("slow"); // Jamvatar (large) $(".jam .jamvatar img").hide().attr('src', jamData.jam.jamvatarLarge).fadeIn("slow"); // Jam title $(".jam .details h2").hide().html(jamData.jam.title).fadeIn("slow"); // Jam artist $(".jam .details h3").hide().html(jamData.jam.artist).fadeIn("slow"); // Get watch code from Youtube link var ytWatchCode = jamData.jam.viaUrl; ytWatchCode = ytWatchCode.replace("https://www.youtube.com/watch?v=", ""); // Drop watch code into Youtube embed URL var jamVideoEmbedUrl = "https://youtube.com/embed/" + ytWatchCode + "?html5=1&rel=0&autoplay=1"; // Set url to link href $("#video").attr("href", jamVideoEmbedUrl); }); }); $('#video').fancybox({ type: 'iframe', padding: 0, width: 640, height: 360, closeBtn: false, });
});
ThisIsMyJam Player - Script Codes
ThisIsMyJam Player - Script Codes
Home Page Home
Developer Mitch Pruitt
Username mitchdot
Uploaded November 08, 2022
Rating 3
Size 5,945 Kb
Views 14,168
Do you need developer help for ThisIsMyJam Player?

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!

Mitch Pruitt (mitchdot) Script Codes
Name
ASCII triangle image overlay
Snazzy fixed backgrounds
The Iron Triangle
Segmented control
Flexbox-based responsive menu
Underlined form fields
Zoomy image rollover
Threadless-style rollover menu
West Eastern Divan rollover
Sliding image
Create amazing SEO 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!