This JS is from a Quill HTML Editor. I am trying to change the size of the Youtube video. I don’t see any CSS that controls that. It’s rather small and would like to increase the size.
Any help would be appreciated. Thank you!
<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>Hi,
Do you have a link to a video embedded in the Quill editor? It would be very helpful to see the problem you are having first hand.
Hello James,
Here’s the link at Quill showing the small video size:
Formats - Quill Rich Text Editor (quilljs.com)
Here’s also a link that I posted with the code thinking that perhaps it was an CSS issue. Since very little to no responses, I though it was maybe a JS issues instead; hence posting here:
Thank you and I appreciate you looking at it.
PS to my last post.
I found this information on resizing which adds handles to control the size. I was unable to get it to work. It looks like its a combination of adding some JS and CSS.
If you refresh yourself on my post of 3 years ago, I also post the html to the database. Therefore the ultimate question would be is any code needed on the view page coming from the database or does the code stored in the database handle the resize.
Thanks
This might be off-topic but the website for Quill seems confused to me. RTF and HTML are not the same. What they look like is very different. The article Rich Text Format - Wikipedia at least implies that they are different. The article Create or delete a Rich Text field - Microsoft Support can certainly make it confusing.
I have always considered Rich Text Format to be a strange name. At the time that Microsoft created RTF, IBM had a RFT format. I do not know if that is more than coincidence. Document Content Architecture - Wikiwand provides a relevant description and is consistent with what I remember back then.
The important thing is that probably Quill should be called a HTML editor, not a rich text editor and if you try to understand what Quill is doing assuming it is doing RTF then you could get incorrect information.
Hi,
I had a look at that link you posted and it seems that in its default state, Quill embeds videos in an iframe, to which it adds a class of ql-video. You can check this by embedding a video in the editor, then inspecting the page using your browser’s console.
This is what I got when I inserted this YouTube video into the editor.
<iframe class="ql-video" allowfullscreen="true" src="https://www.youtube.com/embed/QHH3iSeDBLo" style="width: 450px;height: 300px;" frameborder="0"></iframe>
<iframe class="ql-video" allowfullscreen="true" src="https://player.vimeo.com/video/287527493/" frameborder="0"></iframe>
As you say, the embeds are originally quite tiny, but by targeting that iframe, it is quite possible to alter the video size with some simple CSS. For example:
.ql-video {
width: 800px;
height: 450px;
}
Can you try that out and let me know if by adding that CSS to your regular stylesheet you can alter the embed size at all.
James,
Your are a brilliant guy! This completely works! And when I do my searches, I couldn’t find one thing like that which is so simple and makes sense to me. I just didn’t know how to do that and I thank you so much for looking at it and solving the issues.
Thank you so much again. You are truly appreciated!
Happy to help 
If I can help in anyway, these are the recommended aspect ratios:
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.