/* * adilo-video.css - Add to your assets/css directory * or include in your section for proper Adilo video display */ /* General Adilo Container Styles */ .adilo-viewer-container { margin: 20px; border-radius: 0.375rem; overflow: hidden; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); background-color: #000; } .adilo-player-wrapper { position: relative; width: 100%; margin: 0 auto; overflow: hidden; padding: 20px; background-color: #f8f9fa; } /* Standard responsive container with 16:9 aspect ratio and uniform spacing */ .adilo-responsive-container { position: relative; padding-bottom: 56.25%; /* 16:9 aspect ratio */ height: 0; overflow: hidden; width: 100%; margin: 20px auto; max-width: calc(100% - 40px); border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); background-color: #000; } .adilo-responsive-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; border-radius: 8px; } /* Professional video container wrapper with uniform spacing */ .video-container-wrapper { width: 100%; max-width: 100%; margin: 20px auto; padding: 20px; overflow: hidden; background-color: #f8f9fa; border-radius: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .video-container-wrapper .adilo-responsive-container { margin: 0 auto; max-width: 100%; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); } /* Modal specific styles */ .adilo-modal-container, .adilo-iframe-container { position: absolute !important; top: 0; left: 0; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; background-color: #000; } .adilo-iframe-modal, .modal .adilo-iframe { position: absolute !important; top: 0; left: 0; width: 100% !important; height: 100% !important; border: none; } /* Modal styling */ #videoPreviewModal .modal-content { background-color: #000; border: none; border-radius: 0.5rem; overflow: hidden; } #videoPreviewModal .modal-header { background-color: rgba(0, 0, 0, 0.8); border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding: 0.5rem 1rem; } #videoPreviewModal .modal-title { color: #fff; } #videoPreviewModal .btn-close { color: #fff; filter: invert(1) brightness(150%); } #videoPreviewModal .modal-body { padding: 0; height: 100%; overflow: hidden; } #videoPreviewModal .ratio { width: 100%; padding-bottom: 56.25%; /* 16:9 Aspect Ratio */ height: 0; position: relative; } .adilo-modal-wrapper { width: 100% !important; height: 100% !important; position: relative; padding: 0 !important; margin: 0 !important; background-color: #000; } /* Video controller buttons */ .adilo-controls { margin-top: 0.75rem; } .adilo-controls .btn-group { width: 100%; display: flex; flex-wrap: wrap; } .adilo-controls .btn { flex: 1; min-width: 70px; margin-bottom: 0.25rem; } /* Resizing handle for video */ .adilo-resize-handle { position: absolute; bottom: 0; right: 0; width: 16px; height: 16px; cursor: nwse-resize; background: rgba(255, 255, 255, 0.3); border-radius: 0 0 4px 0; opacity: 0.7; transition: opacity 0.2s; } .adilo-resize-handle:hover { opacity: 1; } /* Hide View Full Video button and any fullscreen controls */ .view-full-video-btn, a:contains("View Full Video"), .btn-primary:contains("View Full Video"), a[href*="view_adilo_material.php"], .material-actions a[href*="view_material.php"] { display: none !important; } .iframe-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; width: 100%; } .iframe-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; } /* Hide all view full video buttons */ .view-full-screen-btn, a[href*="full-screen"], a[href*="fullscreen"], button:contains("Full Screen"), .fullscreen-button, .view-full-video-btn, a:contains("View Full Video"), .material-actions .btn, .btn-primary[href*="view_adilo_material.php"] { display: none !important; } /* Responsive adjustments */ @media (max-width: 768px) { .adilo-responsive-container { margin: 15px auto; max-width: calc(100% - 30px); } .video-container-wrapper { margin: 15px auto; padding: 15px; } .adilo-player-wrapper { padding: 15px; } } @media (max-width: 480px) { .adilo-responsive-container { margin: 10px auto; max-width: calc(100% - 20px); } .video-container-wrapper { margin: 10px auto; padding: 10px; } .adilo-player-wrapper { padding: 10px; } }