Изменение столбца на HTML-странице

var settings = {
  layout: 'focus',
  quality: 'auto',
  focus: 'mute',
  muted: false,
  focused: 0,
  lockedVolume: 1,
  maxVolume: 1,
  quietVolume: 0.2
}
const players = []
// const streams = [
//     { label: 'Mod', channel: '', url: 'https://www.youtube.com/watch?v=eEym57KfR8A' },
//     // { label: 'Room 1', channel: 'kitboga' },
//     // { label: 'Room 2', channel: 'timthetatman' },
//     // { label: 'Room 3', channel: 'miekii' },
//     // { label: 'Room 4', channel: 'hyperrpg' },
//     // { label: 'Room 5', channel: 'gregfromhtd' },
//     // { label: 'summit1g', channel: 'summit1g' },
//     // { label: 'Tim the Tat man', channel: 'timthetatman' },
//     // { label: 'Fifa', channel: 'easportsfifa' },
//     // { label: 'lando', channel: 'landonorris' },
//     // { label: 'glitch', channel: 'glitchcity' }
// ]

const streams = [{
    label: 'Mod',
    url: 'https://www.youtube.com/watch?v=eEym57KfR8A&feature=youtu.be',
    locked: true
  },
  // { label: 'What is Sequester?', url: 'https://www.youtube.com/watch?v=eEym57KfR8A', locked: true, loop: true },
  {
    label: 'Taran',
    channel: 'taranarmstrong',
    locked: false
  },
  {
    label: 'Room 1',
    channel: 'sequesteraccess',
    video: '589646561',
    locked: false
  },
  {
    label: 'Room 2',
    channel: 'sequesteraccess2',
    video: '589646039',
    locked: false
  },
  {
    label: 'Room 3',
    channel: 'sequesteraccess3',
    video: '589646289',
    locked: false
  },
  {
    label: 'Room 4',
    channel: 'sequesteraccess4',
    video: '589646016',
    locked: false
  },
  {
    label: 'Room 5',
    channel: 'sequesteraccess5',
    video: '589646121',
    locked: false
  }
]

var streamList = document.getElementById('streamList')
var layout = document.querySelector('.layout')


// startup
loadList()
loadPlayers()

// set defaults
document.getElementById('maxVolume').value = settings.maxVolume
document.getElementById('quietVolume').value = settings.quietVolume
document.getElementById('lockedVolume').value = settings.lockedVolume
document.getElementById('layout').value = settings.layout
document.getElementById('quality').value = settings.quality
setSetting('layout', settings.layout)
setFocus(settings.focused)

// loads a list of streams
function loadList() {
  // add list items to stream list
  for (var i = 0; i < streams.length; i++) {
    var li = document.createElement('li')
    li.id = 'stream-' + i
    li.innerHTML = streams[i].label
    li.addEventListener('click', setFocusEl)
    streamList.appendChild(li)
  }
}

// loads players for each stream
function loadPlayers() {
  //setUpPlayer(document, -1);
  for (var i = 0; i < streams.length; i++) {
    // add player divs
    setUpPlayer(document, i);
  }
}

function setUpPlayer(container, i) {
  var div = container.createElement('div')
  div.id = 'player' + i
  div.className = 'module'
  layout.appendChild(div)
  // add players
  var opts = {
    width: '100%',
    height: '100%'
  }
  if (streams[i].channel) opts.channel = streams[i].channel
  if (streams[i].video) opts.video = streams[i].video
  if (streams[i].url) {
    // use video.js YT player
    players.push(
      videojs(
        'player' + i, {
          techOrder: ['youtube'],
          controls: false,
          autoplay: true,
          loop: (streams[i].loop) ? streams[i].loop : 0,
          sources: [{
            type: 'video/youtube',
            src: streams[i].url
          }],
          youtube: {
            iv_load_policy: 1,
            ytControls: 2
          }
        }))
    players[i].className = 'video-js vjs-default-skin'
    players[i].volume((streams[i].locked) ? settings.lockedVolume : settings.maxVolume)
    players[i].muted(false)
  } else {
    // use twitch player
    players.push(new Twitch.Player('player' + i, opts))
    players[i].setVolume((streams[i]) ? settings.lockedVolume : settings.maxVolume)
    players[i].setMuted(false)
  }
}


// stores a temp setting from inputs
function setSettingEl(which, event) {
  var el = event.target
  var value = null
  switch (el.type) {
    case 'number':
      value = el.value
      break
    default:
      value = el.options[event.target.selectedIndex].value
      break
  }
  setSetting(which, value)
}

// store a temp setting
function setSetting(which, value) {
  console.log('set setting: ' + which + ' : ' + value)
  settings[which] = value
  // update focus based on settings
  switch (which) {
    case 'focus':
    case 'maxVolume':
    case 'quietVolume':
    case 'lockedVolume':
      setFocus(settings.focused)
      break
    case 'layout':
      var el = document.querySelector('.layout')
      if (value == 'mobile') {
        el.classList.add('mobile')
      } else {
        el.classList.remove('mobile')
      }
      break
    case 'quality':
      setQuality(value)
      break
  }
}

// toggles mute on all streams
function toggleMute() {
  if (players.length < 1) return
  settings.muted = !settings.muted
  if (settings.muted) {
    // mute players
    for (var i = 0; i < players.length; i++) {
      try {
        if (!streams[i].locked) players[i].setMuted(settings.muted)
      } catch (err) {
        // maybe video.js player?
        if (!streams[i].locked) players[i].muted(settings.muted)
      }
    }
  } else {
    // unmute with setFocus
    try {
      setFocus(settings.focused)
    } catch (err) {
      // video.js player?
    }
  }
  console.log('mute players: ' + settings.muted)
}

// toggles pause on all streams
function togglePause() {
  if (players.length < 1) return
  var paused = false
  try {
    paused = players[i].isPaused()
  } catch (err) {
    // YT video.js player
    paused = players[i].paused()
  }
  for (var i = 0; i < players.length; i++) {
    if (paused) {
      players[i].play()
    } else {
      players[i].pause()
    }
  }
}

// set focus from an element event click
function setFocusEl(event) {
  var focus = event.target.id.replace('stream-', '')
  setFocus(focus)
}

// set focus to a specific stream
function setFocus(focus) {
  console.log('set focus: ' + focus)
  settings.focused = focus
  for (var i = 0; i < streams.length; i++) {
    // set class name to focus
    if (i == focus) {
      document.getElementById('player' + i).classList.add('focus')
    } else {
      document.getElementById('player' + i).classList.remove('focus')
    }
  }
  // mute or quiet other streams
  if (settings.focus === 'mute') {
    muteAllBut(focus)
  } else {
    quietAllBut(focus)
  }
}

// set quality on all streams
function setQuality(event) {
  if (players.length < 1) return
  var value = event.target.options[event.target.selectedIndex].value
  console.log('set quality: ' + selected.value)
  for (var i = 0; i < players.length; i++) {
    try {
      players[i].setQuality(value)
    } catch (err) {
      // video.js player?
    }
  }
}

// mutes all but the specified focused stream
function muteAllBut(focus) {
  console.log('muting other players')
  if (players.length < 1) return
  for (var i = 0; i < players.length; i++) {
    try {
      if (!streams[i].locked) players[i].setMuted(false)
      if (i == focus) players[i].setVolume(settings.maxVolume);
      else if (streams[i].locked) players[i].setVolume(settings.lockedVolume);
      else players[i].setVolume(0)
    } catch (err) {
      // video.js player?
      if (!streams[i].locked) players[i].muted(false)
      if (i == focus) players[i].volume(settings.maxVolume);
      else if (streams[i].locked) players[i].volume(settings.lockedVolume);
      else players[i].volume(0)
    }
  }
}

// quiets all but the specified focused stream
function quietAllBut(focus) {
  console.log('quieting other players')
  if (players.length < 1) return
  for (var i = 0; i < players.length; i++) {
    try {
      if (!streams[i].locked) players[i].setMuted(false)
      if (i == focus) players[i].setVolume(settings.maxVolume);
      else if (streams[i].locked) players[i].setVolume(settings.lockedVolume);
      else players[i].setVolume(settings.quietVolume)
    } catch (err) {
      // video.js player?
      if (!streams[i].locked) players[i].muted(false)
      if (i == focus) players[i].volume(settings.maxVolume);
      else if (streams[i].locked) players[i].volume(settings.lockedVolume);
      else players[i].volume(settings.quietVolume)
    }
  }
}

<html5>

  <head>
    <link href="https://unpkg.com/video.js@7/dist/video-js.min.css" rel="stylesheet" />
    <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
    <script src="https://player.twitch.tv/js/embed/v1.js"></script>
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
        background-color: #111;
        color: #eaeaea;
      }
      
      ul {
        display: flex;
        flex-wrap: wrap;
        padding: 0;
      }
      
      ul li,
      button {
        min-width: 4em;
        margin: 0.25em;
        padding: 0.5em;
        background-color: #6666aa;
        color: #ccc;
        border-radius: 0.3em;
        list-style-type: none;
        text-align: center;
        border: none;
        cursor: pointer;
        text-transform: uppercase;
      }
      
      .app {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
      }
      
      .module {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        border: 1px solid #666;
      }
      
      .module.overflow {
        overflow: auto;
      }
      
      .group {
        display: flex;
        padding: 0.25em;
      }
      
      .group label {
        flex: 1;
      }
      
      .list {
        display: flex;
        flex-direction: column;
      }
      
      .pad {
        padding: 0.5em;
      }
      
      .layout {
        display: grid;
        grid-template-columns: 20% 20% 20% 20% 20%;
        grid-template-rows: 33% 33% 33%;
        justify-content: center;
        align-content: flex-start;
        width: 95%;
        height: 95%;
        /* grid-template-columns:  repeat(3, [row] auto );
                grid-template-rows: repeat(auto-fill, 250px); */
        grid-gap: 10px;
      }
      
      .layout.mobile {
        grid-template-rows: 50% 50%;
        grid-template-columns: auto;
      }
      
      .layout.mobile .module.focus {
        grid-row-start: 1;
        grid-column-start: 2;
      }
      
      .options {
        padding: 0.25em;
        grid-column: 1;
        grid-row: 1;
      }
      
      .options>* {
        margin: 0.25em;
      }
      
      .module.focus {
        grid-row-start: 1;
        grid-row-end: 3;
        grid-column-start: 2;
        grid-column-end: 5;
      }
      
      .module.chat {
        grid-row-start: 1;
        grid-row-end: 3;
        grid-column-start: 5;
        grid-column-end: 6;
      }
      
      .vjs-v7 {
        width: 100% !important;
        height: 100% !important;
      }
      
      .desc {
        font-size: smaller;
        color: #888;
      }
      
      .experimental {
        background-color: #773333;
        color: #aaa;
      }
    </style>
  </head>

  <body>
    <div class="app">
      <div class="layout">
        <div id="flabadub" class="module options overflow">
          <h3>Choose Stream</h3>
          <ul id="streamList" class="group"></ul>
          <h3>Options</h3>
          <button onclick="toggleMute()">Toggle Mute</button>
          <div class="group">
            <label>When switching</label>
            <select onchange="setSettingEl('focus', event)">
              <option value="mute" selected>Mute other rooms</option>
              <option value="quiet">Quiet other rooms</option>
            </select>
          </div>
          <div class="group">
            <label>Max Volume</label>
            <input id="maxVolume" onchange="setSettingEl('maxVolume', event)" type="number" min="0" max="1" step="0.1" />
          </div>
          <div class="group">
            <label>Quiet Volume</label>
            <input id="quietVolume" onchange="setSettingEl('quietVolume', event)" type="number" min="0" max="1" step="0.1" />
          </div>
          <div class="group">
            <label>Locked Volume</label>
            <input id="lockedVolume" onchange="setSettingEl('lockedVolume', event)" type="number" min="0" max="1" step="0.1" />
          </div>
          <p class="desc">'Locked' streams don't auto-mute (mod channel), you'll control that manually. Adjust the max volume here.</p>
          <label class="experimental">*Items below in red are experimental</label>
          <div class="group experimental">
            <button onclick="togglePause()">Toggle Pause</button>
          </div>
          <div class="group experimental">
            <label>Layout</label>
            <select id="layout" onchange="setSettingEl('layout', event)">
              <option value="focus">Focus</option>
              <option value="mobile">Mobile</option>
            </select>
          </div>
          <div class="group experimental">
            <label>Quality</label>
            <select id="quality" onchange="setSettingEl('quality', event)">
              <option value="auto">auto</option>
              <option value="720p">720p</option>
              <option value="360p">360p</option>
              <option value="160p">160p</option>
            </select>
          </div>
        </div>
        <div class="module chat">
          I am a beautiful chat (inser iframe here).
        </div>
      </div>
      <script src="https://vjs.zencdn.net/7.7.5/video.js"></script>
      <script src="https://goodiesfor.me/multiview/Youtube.min.js"></script>
  </body>
</html5>