Quill editor - Controll the size of the Youtube video

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">
    <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" />

        body > #standalone-container {
            margin: 50px auto;
            max-width: 720px;

        #editor-container {
            height: 350px;

        .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;

        img {
            max-height: 250px;
            max-width: 250px;
            height: auto;
            width: auto;

        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;

        body {
            padding: 25px;

        #bubble-container, #snow-container {
            height: 300px;
            margin-bottom: 10px;

        .container {
            display: flex;

        .panel {
            flex: 1;
            margin-left: 25px;
            margin-right: 25px;

    <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 class="tooltip">
                                <span class="tooltiptext">Italic</span>
                                <button class="ql-italic"></button>

                            <div class="tooltip">
                                <span class="tooltiptext">Underline</span>
                                <button class="ql-underline"></button>

                        <span class="ql-formats">

                            <div class="tooltip">
                                <span class="tooltiptext">Text color</span>
                                <select class="ql-color"></select>

                            <div class="tooltip">
                                <span class="tooltiptext">Text color background</span>
                                <select class="ql-background"></select>


                        <span class="ql-formats">

                            <div class="tooltip">
                                <span class="tooltiptext">Intent Order by Number</span>
                                <button class="ql-list" value="ordered"></button>

                            <div class="tooltip">
                                <span class="tooltiptext">Intent Order by Bullets</span>
                                <button class="ql-list" value="bullet"></button>


                        <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>


                        <span class="ql-formats">

                            <div class="tooltip">
                                <span class="tooltiptext">Hyperlink</span>
                                <button class="ql-link"></button>

                            <div class="tooltip">
                                <span class="tooltiptext">Image Upload</span>
                                <button class="ql-image"></button>

                            <div class="tooltip">
                                <span class="tooltiptext">Youtube Link</span>
                                <button class="ql-video"></button>

                <div id="editor-container"></div>
                <br />

                <div class="container">
                    <div class="panel">
                        <div id="snow-container"></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 class="panel">
                        <div id="output-container"></div>

                    <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">

                <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>

        // 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 () {
        document.querySelector('#insert-row-below').addEventListener('click', function () {
        document.querySelector('#insert-column-left').addEventListener('click', function () {
        document.querySelector('#insert-column-right').addEventListener('click', function () {
        document.querySelector('#delete-row').addEventListener('click', function () {
        document.querySelector('#delete-column').addEventListener('click', function () {
        document.querySelector('#delete-table').addEventListener('click', function () {

        editor.firstChild.innerHTML = editorContent;

        form.addEventListener('submit', function (e) {
            hiddenInput.value = editor.firstChild.innerHTML;

        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)) {
                } 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;


        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 () {



Yes it can.
YouTube usually gives you the code as an iframe you can use its width and height attributes to set the initial size to whatever you want. But you will also want some CSS to keep it responsive, so it shrinks smaller on small screens and also to maintain its aspect ratio.
The aspect ration used to be tricky, but doable, but now with the CSS aspect-ratio property it’s much simpler to do.

1 Like

Thinking this through… would the Youtube iframe code make any difference? Because I am wondering if the size is actually coming from the JS rather than the CSS. I am thinking this because I can’t find any part of the CSS that gives dimensions. If so, I could simply change it there. Your thoughts?

The other thought is that if the size is coming from the JS, can that be changed (enlarged) with its own CSS? If so, I don’t know how to do that. I was looking at the JS and I couldn’t find anything there that deals with the dimensions.

All of the above being said, I am not, like many of you, an expert in this matter, so maybe I am missing something that is key to solving this issue.

I appreciate your expertise and thoughts.