SCSS

by oilvier

HTML

<div data-params='{autoplay": 1, "modestbranding": 1, "rel": 0, "loop": 0, "controls": 1, "playsinline": 1, "origin": "https://www.caroll.com"}'></div>

SCSS

$blue: #0084ff;
$blue-darker: darken($blue, 5);

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
  
  button {
    background: $blue-darker;
    border: none;
    border-radius: 5px;
    padding: 8px 14px;
    font-size: 15px;
    color: #fff;
  }
  
  &:hover {
    background: $blue-darker;
    color: #fff;
    margin-top: 40px;
    width: 200px;
  }
  
  &:hover button {
    background: #fff;
    color: #000;
  }
}

JavaScript

var obj = document.querySelector('div').getAttribute('data-params').replace(/[{}]/g, "");
var str = Object.keys(obj).map(function(key) {
  return key + '=' + obj[key];
}).join('&');

console.log(obj);
console.log(str);