Javascript 更改HTML页面上的列
我有一个代码我需要建议我想保持它完全一样，因为它是现在除了主视频框我想让宽度更小，然后我想在它旁边添加一个iframe代码，这样我可以添加一个聊天框这里是代码Javascript 更改HTML页面上的列,javascript,html,Javascript,Html,我有一个代码我需要建议我想保持它完全一样，因为它是现在除了主视频框我想让宽度更小，然后我想在它旁边添加一个iframe代码，这样我可以添加一个聊天框这里是代码 <html5> <head> <style> html, body { margin: 0; padding: 0; background-color:
<html5>
<head>
<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: 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 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>
</div>
html，正文{
保证金：0；
填充：0；
背景色：#111；
颜色：#eaeaea；
}
保险商实验室{
显示器：flex；
柔性包装：包装；
填充：0；
}
ulli，按钮{
最小宽度：4em；
边缘：0.25em；
填充：0.5em；
背景色：#6666aa；
颜色：#ccc；
边界半径：0.3em；
列表样式类型：无；
文本对齐：居中；
边界：无；
光标：指针；
文本转换：大写；
}
.app{
显示器：flex；
证明内容：中心；
对齐项目：居中；
宽度：100%；
身高：100%；
}
.模块{
位置：相对位置；
显示器：flex；
弯曲方向：立柱；
调整内容：灵活启动；
边框：1px实心#666；
}
.module.overflow{
溢出：自动；
}
.组{
显示器：flex；
填充：0.25em；
}
.组标签{
弹性：1；
}
.名单{
显示器：flex；
弯曲方向：立柱；
}
.pad{
填充：0.5em；
}
.布局{
显示：网格；
网格模板柱：20%20%20%20%20%；
网格模板行：33%33%33%；
证明内容：中心；
调整内容：灵活启动；
宽度：95%；
身高：95%；
/*网格模板列：重复（3，[行]自动）；
网格模板行：重复（自动填充，250px）*/
栅隙：10px；
}
.layout.mobile{
网格模板行：50%50%；
网格模板列：自动；
}
.layout.mobile.module.focus{
网格行开始：1；
网格列开始：2；
}
.选项{
填充：0.25em；
网格柱：1；
网格行：1；
}
.选项>*{
边缘：0.25em；
}
.module.focus{
网格行开始：1；
网格行端：3；
网格列开始：2；
网格柱端：6；
}
.vjs-v7{
宽度：100%！重要；
身高：100%！重要；
}
.描述{
字体大小：较小；
颜色：#888；
}
.实验性{
背景色：#773333；
颜色：#aaa；
}
选择流
选择权
切换静音
切换时
使其他房间静音
安静的其他房间
最大音量
静音量
锁定卷
“锁定”流不会自动静音（mod通道），您将手动控制。在此调整最大音量
*下面红色的项目是实验性的
暂停开关
布局
集中
可移动的
质量
汽车
720便士
360便士
160便士
这让我陷入困境，我已经尝试了这么多个小时，所以如果有人知道如何解决这个问题，任何帮助都是非常感谢的 只需将您的焦点课程改为：
.module.focus {
grid-row-start: 1;
grid-row-end: 3; // tweak this to occupy more vertical space
grid-column-start: 2; // Changes start column in your grid
grid-column-end: 5; // tweak this to occupy more horizontal space
}
.module.chat {
grid-row-start: 1;
grid-row-end: 3; // tweak this to occupy more vertical space
grid-column-start: 5; // Changes start column in your grid
grid-column-end: 6; // tweak this to occupy more horizontal space
}
var设置={
布局：“焦点”，
质量：“自动”，
焦点：“静音”，
沉默：错，
重点：0，
锁定卷：1，
最大容量：1，
安静体积：0.2
}
常量玩家=[]
//常量流=[
//{标签：'Mod'，频道：''，url:'https://www.youtube.com/watch?v=eEym57KfR8A' },
////{标签：“房间1”，频道：“kitboga”}，
////{标签：'2号房间'，频道：'timthetatman'}，
////{标签：“房间3”，频道：“miekii”}，
////{标签：'Room 4'，频道：'hyperrpg'}，
////{标签：“房间5”，频道：“gregfromhtd”}，
////{label:'summit1g'，channel:'summit1g'}，
////{标签：'Tim the Tat man'，频道：'Tim the Tat man'}，
////{标签：“国际足联”，频道：“easportsfifa”}，
////{标签：'lando'，频道：'landonorris'}，
////{标签：'glitch'，频道：'glitchcity'}
// ]
常量流=[{
标签：'