This code is from a prior closed post #56.
I would like to make the Youtube video size larger. If you try a Youtube link, you will see that it’s small.
So my question is can the size of the video be controlled by CSS width style?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Full Editor - Quill Rich Text Editor</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/monokai-sublime.min.css" />
<link rel="stylesheet" href="https://cdn.quilljs.com/2.0.0-dev.2/quill.snow.css" />
<style>
body > #standalone-container {
margin: 50px auto;
max-width: 720px;
}
#editor-container {
height: 350px;
}
</style>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 0px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
font-family: consolas,monospace;
position: absolute;
bottom: 25px;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<style>
img {
max-height: 250px;
max-width: 250px;
height: auto;
width: auto;
}
</style>
<style>
button[name="snow-container"] {
font-family: Arial, Helvetica, sans-serif;
border: 1px solid transparent;
width: 200px;
height: 25px;
font-size: 18px;
background-color: #4c659b;
border-radius: 10px;
color: white;
}
</style>
<style>
body {
padding: 25px;
}
#bubble-container, #snow-container {
height: 300px;
margin-bottom: 10px;
}
.container {
display: flex;
}
.panel {
flex: 1;
margin-left: 25px;
margin-right: 25px;
}
</style>
</head>
<body>
<div id="standalone-container">
<div id="Div1">
<div id="Div2">
<div id="toolbar-container">
<span class="ql-formats">
<select class="ql-size"></select>
<span class="ql-formats">
<div class="tooltip">
<span class="tooltiptext">Bold</span>
<button class="ql-bold"></button>
</div>
<div class="tooltip">
<span class="tooltiptext">Italic</span>
<button class="ql-italic"></button>
</div>
<div class="tooltip">
<span class="tooltiptext">Underline</span>
<button class="ql-underline"></button>
</div>
</span>
<span class="ql-formats">
<div class="tooltip">
<span class="tooltiptext">Text color</span>
<select class="ql-color"></select>
</div>
<div class="tooltip">
<span class="tooltiptext">Text color background</span>
<select class="ql-background"></select>
</div>
</span>
<span class="ql-formats">
<div class="tooltip">
<span class="tooltiptext">Intent Order by Number</span>
<button class="ql-list" value="ordered"></button>
</div>
<div class="tooltip">
<span class="tooltiptext">Intent Order by Bullets</span>
<button class="ql-list" value="bullet"></button>
</div>
</span>
<span class="ql-formats">
<div class="tooltip">
<span class="tooltiptext">Alignment Left, Center, Right</span>
<select class="ql-align">
<option value=""></option>
<option value="center"></option>
<option value="right"></option>
</select>
</div>
</span>
<span class="ql-formats">
<div class="tooltip">
<span class="tooltiptext">Hyperlink</span>
<button class="ql-link"></button>
</div>
<div class="tooltip">
<span class="tooltiptext">Image Upload</span>
<button class="ql-image"></button>
</div>
<div class="tooltip">
<span class="tooltiptext">Youtube Link</span>
<button class="ql-video"></button>
</div>
</span>
</div>
<div id="editor-container"></div>
<br />
<div class="container">
<div class="panel">
<div id="snow-container"></div>
<div>
<button id="insert-table">Insert Table</button>
<button id="insert-row-above">Insert Row Above</button>
<button id="insert-row-below">Insert Row Below</button>
<button id="insert-column-left">Insert Column Left</button>
<button id="insert-column-right">Insert Column Right</button>
<button id="delete-row">Delete Row</button>
<button id="delete-column">Delete Column</button>
<button id="delete-table">Delete Table</button>
</div>
</div>
<div class="panel">
<div id="output-container"></div>
</div>
</div>
<center>
<form method="POST" action="post.asp" name="mainform">
<input type="hidden" id="myHtml" name="myHtml">
<input type="hidden" value="47" name="id">
<input type="submit" value="Submit">
</form>
</center>
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script src="https://cdn.quilljs.com/2.0.0-dev.2/quill.js"></script>
<script>
// Fetch content from database here
var editorContent = '<%=rs("myHtml")%>';
var editor = document.getElementById('editor-container');
var hiddenInput = document.getElementById('myHtml');
var form = document.forms.mainform;
var quill = new Quill(editor, {
modules: {
table: true,
syntax: true,
toolbar: '#toolbar-container'
},
placeholder: 'Compose an epic...',
theme: 'snow'
});
var table = quill.getModule('table');
document.querySelector('#insert-table').addEventListener('click', function () {
table.insertTable(2, 2);
});
document.querySelector('#insert-row-above').addEventListener('click', function () {
table.insertRowAbove();
});
document.querySelector('#insert-row-below').addEventListener('click', function () {
table.insertRowBelow();
});
document.querySelector('#insert-column-left').addEventListener('click', function () {
table.insertColumnLeft();
});
document.querySelector('#insert-column-right').addEventListener('click', function () {
table.insertColumnRight();
});
document.querySelector('#delete-row').addEventListener('click', function () {
table.deleteRow();
});
document.querySelector('#delete-column').addEventListener('click', function () {
table.deleteColumn();
});
document.querySelector('#delete-table').addEventListener('click', function () {
table.deleteTable();
});
editor.firstChild.innerHTML = editorContent;
form.addEventListener('submit', function (e) {
e.preventDefault();
hiddenInput.value = editor.firstChild.innerHTML;
this.submit();
});
function selectLocalImage() {
var input = document.createElement('input');
input.setAttribute('type', 'file');
input.click(); // Listen upload local image and save to server
input.onchange = function () {
var file = input.files[0]; // file type is only image.
if (/^image\//.test(file.type)) {
saveToServer(file);
} else {
console.warn('You could only upload images.');
}
};
}
function saveToServer(file) {
var fd = new FormData();
fd.append('image', file);
var xhr = new XMLHttpRequest();
xhr.open('POST', 'https://local.com', true);
xhr.onload = function () {
if (xhr.status === 200) {
var url = xhr.responseText;
insertToEditor(url);
}
};
xhr.send(fd);
}
function insertToEditor(url) {
// push image url to rich editor.
var range = quill.getSelection();
quill.insertEmbed(range.index, 'image', "https://yourwebsite.com".concat(url));
}
quill.getModule('toolbar').addHandler('image', function () {
selectLocalImage();
});
</script>
</body>
</html>