.

src/backend/views/pages/blocks/video.twig

@@ -1,11 +1,7 @@
 {% set alignment = alignment|default('center') %}
 {% set filetype = filetype|default('file') %}
 
-<figure class="block-video" style="margin: 
-  {% if alignment == 'left' %}0 auto 0 0
-  {% elseif alignment == 'right' %}0 0 0 auto
-  {% else %}0 auto
-  {% endif %};">
+<figure class="block-video">
   <div class="{{ classes.join(' ') }}">
     {% if filetype == 'youtube' or filetype == 'rutube' %}
       <iframe 
@@ -26,4 +22,4 @@
       {{ caption|raw }}
     </footer>
   {% endif %}
-</figure>
+</figure>

src/frontend/js/classes/video-tool.js

@@ -3,6 +3,7 @@ export default class VideoTool {
     return {
       icon: `<svg width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M16.25 3.75H3.75C2.36929 3.75 1.25 4.86929 1.25 6.25V13.75C1.25 15.1307 2.36929 16.25 3.75 16.25H16.25C17.6307 16.25 18.75 15.1307 18.75 13.75V6.25C18.75 4.86929 17.6307 3.75 16.25 3.75Z" stroke="currentColor" stroke-width="1.5"/><path d="M8.125 6.875L13.125 10L8.125 13.125V6.875Z" fill="currentColor"/></svg>`,
       title: 'Video',
+      name: 'video', // Diagnostic: Add name property
     };
   }
 
@@ -14,6 +15,8 @@ export default class VideoTool {
     this.wrapper = null;
     this.alignment = data.alignment || 'center';
     this.filetype = data.filetype || 'file';
+
+    this.name = 'video'; // Diagnostic: Add name property to instance
     
     this._handleFileUpload = this._handleFileUpload.bind(this);
     this._handleUrlSubmit = this._handleUrlSubmit.bind(this);
@@ -140,9 +143,6 @@ export default class VideoTool {
         };
 
         this.api.blocks.update(this.block.id, this.data);
-        
-        this.wrapper.innerHTML = '';
-        this._createVideoElement(embedUrl, '');
 
         submitBtn.disabled = false;
         submitBtn.textContent = ' ';
@@ -185,6 +185,10 @@ export default class VideoTool {
     const container = document.createElement('div');
     container.className = 'video-container';
     container.style.margin = this._getAlignmentMargin();
+    container.style.position = 'relative';
+    container.style.paddingBottom = '56.25%'; // 16:9 aspect ratio
+    container.style.height = '0';
+    container.style.overflow = 'hidden';
 
     const type = filetype || this.filetype || 
         (url.match(/\.(mp4|webm|ogg)$/i) ? 'file' :
@@ -192,10 +196,11 @@ export default class VideoTool {
         (url.includes('rutube.ru/embed') || url.includes('rutube.ru/video') ? 'rutube' : 'file')));
 
     const mediaContainer = document.createElement('div');
-    mediaContainer.style.position = 'relative';
-    mediaContainer.style.paddingBottom = '56.25%';
-    mediaContainer.style.height = '0';
-    mediaContainer.style.overflow = 'hidden';
+    mediaContainer.style.position = 'absolute';
+    mediaContainer.style.top = '0';
+    mediaContainer.style.left = '0';
+    mediaContainer.style.width = '100%';
+    mediaContainer.style.height = '100%';
 
     if (type === 'file') {
         const video = document.createElement('video');
@@ -206,6 +211,7 @@ export default class VideoTool {
         video.style.left = '0';
         video.style.width = '100%';
         video.style.height = '100%';
+        video.style.verticalAlign = 'top'; // Добавляем vertical-align
         mediaContainer.appendChild(video);
     } else {
         const iframe = document.createElement('iframe');
@@ -219,6 +225,7 @@ export default class VideoTool {
         iframe.style.left = '0';
         iframe.style.width = '100%';
         iframe.style.height = '100%';
+        iframe.style.verticalAlign = 'top'; // Добавляем vertical-align
         mediaContainer.appendChild(iframe);
     }
 
@@ -307,4 +314,4 @@ export default class VideoTool {
         }
     });
   }
-}
+}

src/frontend/styles/components/writing.pcss

@@ -123,7 +123,7 @@
   display: none;
 }
 
-/* Палитра цветов */
+/* Палитра цветов */
 .color-palette {
   background: white;
   border: 1px solid #eaeaea;
@@ -202,7 +202,7 @@
   background: rgba(0,0,0,0.1);
 }
 
-/* Активная кнопка в тулбаре */
+/* Активная кнопка в тулбаре */
 .ce-inline-tool--active svg {
   filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.3));
 }
@@ -211,13 +211,13 @@
   transition: fill 0.2s ease;
 }
 
-/* Стили для палитры размеров */
+/* Стили для палитры размеров */
 .size-palette {
   background: white;
   border: 1px solid #eaeaea;
   border-radius: 6px;
   padding: 6px;
-  width: 90px; /* Уменьшенная ширина */
+  width: 90px; /* Уменьшенная ширина */
   max-height: 132px;
   z-index: 1000;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
@@ -229,7 +229,7 @@
 .size-palette-container {
   display: flex;
   flex-direction: column;
-  gap: 4px; /* Уменьшенный gap */
+  gap: 4px; /* Уменьшенный gap */
 }
 
 .size-input-wrapper {
@@ -245,7 +245,7 @@
   border-radius: 4px;
   font-size: 12px;
   min-width: 0;
-  width: 40px; /* Фиксированная ширина поля ввода */
+  width: 40px; /* Фиксированная ширина поля ввода */
 }
 
 .size-apply-btn {
@@ -266,7 +266,7 @@
   overflow-y: auto;
   display: flex;
   flex-direction: column;
-  gap: 2px; /* Минимальный gap между элементами */
+  gap: 2px; /* Минимальный gap между элементами */
 }
 
 .size-palette-item {
@@ -285,14 +285,14 @@
   background: #f5f5f5;
 }
 
-/* Кнопка в тулбаре */
+/* Кнопка в тулбаре */
 .ce-inline-tool .size-label {
   margin-left: 4px;
   font-size: 12px;
   color: #666;
 }
 
-/* Иконка в тулбаре */
+/* Иконка в тулбаре */
 .ce-inline-tool svg text {
   font-family: Arial, sans-serif;
   font-weight: bold;
@@ -320,9 +320,25 @@
 .retry-button:hover {
     background: #0d8aee;
 }
+
+.video-upload-button {
+    display: block;
+    padding: 10px 15px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    background-color: #f9f9f9;
+    cursor: pointer;
+    text-align: center;
+    font-size: 14px;
+    color: #333;
+}
+
+.video-upload-button input[type="file"] {
+    display: none; /* Hide the actual file input */
+}
+
 .video-tool {
   position: relative;
-  margin: 1rem 0;
 }
 
 .video-tool__container {
@@ -338,7 +354,7 @@
   height: auto;
 }
 
-/* Ручки ресайза */
+/* Ручки ресайза */
 .resize-handle {
   position: absolute;
   right: 0;
@@ -360,8 +376,6 @@
 .cdx-image {
   position: relative;
   display: block;
-  width: fit-content;
-  margin: 1rem auto;
   max-width: 100%;
 }
 
@@ -382,7 +396,7 @@
 
 .block-video > div {
   position: relative;
-  padding-bottom: 56.25%; /* 16:9 <EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD> */
+  padding-bottom: 56.25%; /* 16:9 ńîîňíîřĺíčĺ */
   height: 0;
   overflow: hidden;
   background: #000;
@@ -422,12 +436,12 @@
   line-height: 1.4;
 }
 
-/* Общие стили для выравнивания */
+/* Общие стили для выравнивания */
 .block-image, .block-video {
   clear: both;
 }
 
-/* Стили для кнопок выравнивания */
+/* Стили для кнопок выравнивания */
 .image-alignment-controls,
 .video-alignment-controls {
   position: absolute;
@@ -481,7 +495,7 @@
   opacity: 1;
 }
 
-/* Элементы управления выравниванием */
+/* Элементы управления выравниванием */
 .alignment-controls {
   position: absolute;
   top: 5px;
@@ -565,4 +579,15 @@
 .video-container video {
     display: block;
     margin: 0 auto;
-}
+}
+
+/* Переопределение стилей Editor.js для видеоблока */
+.video-tool .ce-block,
+.video-tool .ce-block__content {
+  padding-top: 0 !important;
+  margin-top: 0 !important;
+}
+
+.video-tool.cdx-block {
+  padding-top: 0 !important;
+}