Original Code by https://github.com/Royalgamer06
Modified Code for XenForo by surVfate (me)
Demo: https://jsfiddle.net/2m55ubay/ (Font will auto adapt into your XenForo Theme Font)
Put the below into Embed HTML:
<div id="steamcontent_{$id}"><iframe data-s9e-mediaembed="steamstore" allowfullscreen="" scrolling="no" src="//store.steampowered.com/widget/{$id}" style="border:0;height:190px;max-width:900px;width:100%"></iframe></div>
<script type="text/javascript">
function displaySteamInfo() {
var appid = {$id};
var default_css = 'background-color:#1B2838;padding:30px;color:#acb3b9';
var title_css = 'color:#ffffff;font-family:impact;font-size:36px';
var section_css = 'color:#67c1f5;font-family:impact;font-size:24px';
var json_url = 'https://query.yahooapis.com/v1/public/yql?q=select+*+from+json+where+url%3D%22http%3A%2F%2Fstore.steampowered.com%2Fapi%2Fappdetails%3Fappids%3D' + appid + '%22&format=json';
var xhr = new XMLHttpRequest();
//xhr.responseType = 'json';
xhr.onload = function() {
if (xhr.status == 200) {
processSteamInfo(JSON.parse(xhr.response));
}
};
xhr.open('get', json_url, true);
xhr.send();
function processSteamInfo(data) {
var result;
for (var key in data.query.results) {
if(data.query.results.hasOwnProperty(key)) {
result = data.query.results[key].data;
break;
}
}
if (result === undefined) {
document.getElementById('steamcontent_' + appid).innerHTML = 'Not a valid Steam AppID!';
} else {
var store_url = '="http://store.steampowered.com/app/' + appid + '"';
var steamcontent = '<div style="float: right;"><a href' + store_url + '><' + 'img src="' + result.header_image + '" style="margin-bottom: 20px; margin-top: 10px;"></a>';
try {
steamcontent += '<br><video width="460" poster="' + result.movies[0].thumbnail + '" preload="none" controls>';
steamcontent += '<source src="' + result.movies[0].webm.max + '" type="video/webm"></video>';
} catch(e) {
try {
steamcontent += '<br><video width="460" poster="' + result.movies.thumbnail + '" preload="none" controls>';
steamcontent += '<source src="' + result.movies.webm.max + '" type="video/webm"></video>';
} catch(err) {}
}
steamcontent += '</div><span style="' + title_css + '">' + result.name.toUpperCase() + '</span>';
steamcontent += '<br><br><span style="' + section_css + '">DETAILS</span>';
steamcontent += '<br><b>AppID: </b>' + appid;
steamcontent += '<br><b>Title: </b> ' + result.name + '<br><b>Genre(s): </b> ';
if (result.genres.length === undefined) {
steamcontent += result.genres.description;
}
else {
steamcontent += result.genres[0].description;
for (var i = 1; i < result.genres.length; i++)
steamcontent += ', ' + result.genres[i].description;
}
steamcontent += '<br><b>Developer: </b>' + result.developers;
steamcontent += '<br><b>Publisher: </b>' + result.publishers;
steamcontent += '<br><b>Release Date: </b>' + result.release_date.date;
steamcontent += '<br><b>Language(s): </b><ul style="list-style-image: url(http://store.akamai.steamstatic.com/public/images/v6/ico/ico_bluecheck.png)">';
var notice = result.supported_languages.toString().split('<br>')[1];
var langs = result.supported_languages.toString().replace(notice,'').split(',');
for (var i = 0; i < langs.length; i++) {
steamcontent += '<li>' + langs[i] + '</li>';
}
steamcontent += '</ul>';
if (notice !== undefined) {
steamcontent += notice + '<br>';
}
steamcontent += '<br><span style="' + section_css + '">FEATURES</span><ul>';
for (var i = 0; i < result.categories.length; i++) {
var cat_desc = result.categories[i].description;
if (cat_desc == "Single-player") {
steamcontent += '<li style="list-style-image: url(http://i.imgur.com/SlpQaWP.png)">' + cat_desc + '</li>';
} else if (cat_desc == "Multi-player") {
steamcontent += '<li style="list-style-image: url(http://i.imgur.com/J9qtjoQ.png)">' + cat_desc + '</li>';
} else if (cat_desc == "Cross-Platform Multiplayer") {
steamcontent += '<li style="list-style-image: url(http://i.imgur.com/J9qtjoQ.png)">' + cat_desc + '</li>';
} else if (cat_desc == "MMO") {
steamcontent += '<li style="list-style-image: url(http://i.imgur.com/J9qtjoQ.png)">' + cat_desc + '</li>';
} else if (cat_desc == "Co-op") {
steamcontent += '<li style="list-style-image: url(http://i.imgur.com/qbb9guy.png)">' + cat_desc + '</li>';
} else if (cat_desc == "Local Co-op") {
steamcontent += '<li style="list-style-image: url(http://i.imgur.com/qbb9guy.png)">' + cat_desc + '</li>';
} else if (cat_desc == "Steam Achievements") {
steamcontent += '<li style="list-style-image: url(http://i.imgur.com/nIUVeQw.png)">' + cat_desc + '</li>';
} else if (cat_desc == "Steam Leaderboards") {
steamcontent += '<li style="list-style-image: url(http://i.imgur.com/mdvJtUD.png)">' + cat_desc + '</li>';
} else if (cat_desc == "Steam Cloud") {
steamcontent += '<li style="list-style-image: url(http://i.imgur.com/h7Xx9EQ.png)">' + cat_desc + '</li>';
} else if (cat_desc == "Stats") {
steamcontent += '<li style="list-style-image: url(http://i.imgur.com/35onv4H.png)">' + cat_desc + '</li>';
} else if (cat_desc == "Includes level editor") {
steamcontent += '<li style="list-style-image: url(http://i.imgur.com/JLpw8zj.png)">' + cat_desc + '</li>';
} else if (cat_desc == "Partial Controller Support") {
steamcontent += '<li style="list-style-image: url(http://i.imgur.com/IVCZU3n.png)">' + cat_desc + '</li>';
} else if (cat_desc == "Full controller support") {
steamcontent += '<li style="list-style-image: url(http://i.imgur.com/jNt4NNj.png)">' + cat_desc + '</li>';
} else if (cat_desc == "Captions available") {
steamcontent += '<li style="list-style-image: url(http://i.imgur.com/vzxAPmF.png)">' + cat_desc + '</li>';
} else if (cat_desc == "Steam Trading Cards") {
steamcontent += '<li style="list-style-image: url(http://i.imgur.com/2V551sC.png)">' + cat_desc + '</li>';
} else if (cat_desc == "Steam Workshop") {
steamcontent += '<li style="list-style-image: url(http://i.imgur.com/202HgdU.png)">' + cat_desc + '</li>';
} else if (cat_desc == "Early Access") {
steamcontent += '<li style="list-style-image: url(http://i.imgur.com/t2NJMOX.png)">' + cat_desc + '</li>';
} else if (cat_desc == "VR Support") {
steamcontent += '<li style="list-style-image: url(http://i.imgur.com/9Fi7Hos.png)">' + cat_desc + '</li>';
} else if (cat_desc == "Commentary available") {
steamcontent += '<li style="list-style-image: url(http://i.imgur.com/TjsIJAH.png)">' + cat_desc + '</li>';
} else if (cat_desc == "Commentary available") {
steamcontent += '<li style="list-style-image: url(http://i.imgur.com/TjsIJAH.png)">' + cat_desc + '</li>';
} else if (cat_desc == "Includes Source SDK") {
steamcontent += '<li style="list-style-image: url(http://i.imgur.com/alL8qQr.png)">' + cat_desc + '</li>';
} else {
steamcontent += '<li>' + cat_desc + '</li>';
}
}
if (result.platforms.windows == "true") {
steamcontent += '<br><li style="list-style-image: url(http://i.imgur.com/5e9unSL.png)">Windows support</li>';
}
if (result.platforms.mac == "true") {
steamcontent += '<li style="list-style-image: url(http://i.imgur.com/d9DJ8ds.png)">Mac support</li>';
}
if (result.platforms.linux == "true") {
steamcontent += '<li style="list-style-image: url(http://i.imgur.com/pv2olAh.png)">SteamOS/Linux support</li>';
}
steamcontent += '</ul><br><span style="' + section_css + '">ABOUT THE GAME</span><br>' + result.about_the_game;
steamcontent += '<br><br><span style="' + section_css + '">SYSTEM REQUIREMENTS</span><br>';
if (result.pc_requirements.minimum !== undefined) {
steamcontent += result.pc_requirements.minimum;
}
if (result.pc_requirements.recommended !== undefined) {
steamcontent += result.pc_requirements.recommended;
}
steamcontent += '<br><span style="' + section_css + '">SUPPORT THE GAME</span><br>';
steamcontent += '<iframe src="http://store.steampowered.com/widget/' + appid + '/" frameborder="0" width="646" height="190"></iframe>';
var isMobile = window.matchMedia("only screen and (max-width: 760px)");
if (!isMobile.matches) {
var content_elem = document.getElementById('steamcontent_' + appid);
content_elem.style = default_css;
content_elem.innerHTML = steamcontent;
}
}
}
};
$(document).ready(displaySteamInfo());
$(document).ajaxComplete(displaySteamInfo());
</script>