- सीएसएस पृष्ठभूमि वीडियो बेहतर उपयोगकर्ता अनुभव के लिए वेबसाइट सामग्री के पीछे आकर्षक दृश्य प्रभाव पैदा करते हैं।
- वीडियो पृष्ठभूमि को क्रियान्वित करने में HTML वीडियो तत्व जोड़ना और प्रतिक्रियाशीलता के लिए इसे CSS के साथ स्टाइल करना शामिल है।
- सीएसएस अनुकूलन को सक्षम बनाता है जैसे टेक्स्ट को ओवरले करना, पठनीयता सुनिश्चित करना और पृष्ठभूमि वीडियो को मोबाइल-अनुकूल बनाना।
- वास्तविक दुनिया के उदाहरण और व्यावहारिक CSS कोड स्निपेट इंटरैक्टिव तत्वों के लिए प्रभावी उपयोग और सामान्य समाधान दर्शाते हैं।
किसी आधुनिक वेबसाइट पर जाते समय, यह आम बात होती जा रही है कि गतिशील, पूर्ण-स्क्रीन वीडियो पृष्ठभूमि जो तुरंत आगंतुकों को आकर्षित करते हैं। ई-कॉमर्स स्टोर्स और क्रिएटिव ब्रांड्स के बीच लोकप्रिय इस तरह की विज़ुअल रणनीति, किसी भी शब्द को पढ़े जाने से बहुत पहले ही एक मूड बना देती है और एक संदेश पहुँचा देती है। लेकिन CSS और HTML का उपयोग करके ये वीडियो बैकग्राउंड वास्तव में कैसे बनाए और प्रबंधित किए जाते हैं? आइए इस प्रक्रिया को समझते हैं और कुछ व्यावहारिक सलाह पर नज़र डालते हैं।
एक जोड़ना सीएसएस के साथ पृष्ठभूमि वीडियो यह जितना दिखता है, उससे कहीं ज़्यादा आसान है। यह तकनीक मुख्य रूप से वीडियो एम्बेड करने के लिए HTML और स्टाइलिंग, प्लेसमेंट और रिस्पॉन्सिवनेस के लिए CSS को जोड़ती है। इसके लिए भारी जावास्क्रिप्ट या जटिल थर्ड-पार्टी प्लगइन्स की ज़रूरत नहीं होती। यहाँ हम CSS बैकग्राउंड वीडियो क्या है, इसे सेट अप करने के चरण, उपयोगी स्टाइलिंग टिप्स और इन विचारों को व्यवहार में लाने के लिए कुछ वास्तविक उदाहरणों पर चर्चा करेंगे।
CSS पृष्ठभूमि वीडियो को समझना
A CSS का उपयोग करके पृष्ठभूमि वीडियो यह मूलतः एक मूक, लूपिंग वीडियो है जो साइट की मुख्य सामग्री के पीछे स्थित है। मुख्य सामग्री के बजाय, यह एक पृष्ठभूमि के रूप में कार्य करता है—दृश्य रुचि जोड़ता है और ब्रांड के माहौल को मज़बूत करता है। वीडियो को मानक HTML का उपयोग करके HTML में रखा गया है। <video> टैग, लेकिन CSS वह है जो वीडियो सुनिश्चित करता है व्यूपोर्ट को भरता है, पृष्ठभूमि में रहता है, और विभिन्न उपकरणों के अनुकूल होता है मूल।
CSS के साथ वीडियो पृष्ठभूमि कैसे जोड़ें
फ़ुल-स्क्रीन बैकग्राउंड वीडियो सेट अप करने के लिए आमतौर पर कुछ ज़रूरी कदम उठाने पड़ते हैं। शुरुआत करने के लिए नीचे एक संक्षिप्त गाइड दी गई है:
- शामिल करें a
<video>अपने HTML में टैग: यह स्रोत और प्लेबैक व्यवहार (ऑटोप्ले, लूप, म्यूटेड, फ़ॉलबैक के लिए पोस्टर) सेट करता है। पहुँच और अनुकूलता के लिए, इस तरह की विशेषताओं का उपयोग करना सुनिश्चित करें ऑटोप्ले, म्यूटेड, लूप, और प्लेइनलाइन क्योंकि अधिकांश ब्राउज़रों को ऑटोप्ले सक्षम करने के लिए म्यूट किए गए वीडियो की आवश्यकता होती है। - CSS का उपयोग करके वीडियो को स्टाइल करें: पोजिशनिंग का उपयोग करें (आमतौर पर स्थिति: निश्चित), न्यूनतम चौड़ाई/ऊंचाई, और स्टैकिंग संदर्भ (z-इंडेक्स: -1) वीडियो को पृष्ठभूमि के रूप में रखने के लिए। ऑब्जेक्ट-फिट: कवर पहलू अनुपात को बनाए रखने और विरूपण के बिना स्थान को भरने के लिए संपत्ति महत्वपूर्ण है।
- शीर्ष पर सामग्री परतें जोड़ें: अपनी साइट की मुख्य सामग्री को ओवरले करें—जैसे शीर्षक, विवरण और कॉल-टू-एक्शन बटन—पृष्ठभूमि वीडियो के ऊपर स्टैक किए गए तत्व का उपयोग करके (z-इंडेक्स: 1 या उच्चतर)।
- मोबाइल उपकरणों के लिए अनुकूलन करें: छोटे स्क्रीन के लिए फ़ॉन्ट आकार, पैडिंग और यहां तक कि वीडियो स्केलिंग को समायोजित करने के लिए मीडिया क्वेरी का उपयोग करें ताकि आपका लेआउट साफ रहे और पाठ सुपाठ्य रहे।
वीडियो पृष्ठभूमि के लिए नमूना CSS स्निपेट
उत्तरदायी, पूर्ण-स्क्रीन पृष्ठभूमि के लिए वीडियो तत्व को स्टाइल करने का एक सरल तरीका यहां दिया गया है:
#background-video {
position: fixed;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%;
object-fit: cover;
z-index: -1;
}
.hero-content {
position: relative;
z-index: 1;
text-align: center;
color: white;
padding: 20vh 10vw;
}
@media (max-width: 750px) {
.hero-content {
font-size: 1.5rem;
padding: 15vh 8vw;
}
}
यह उदाहरण दिखाता है कि कैसे CSS posiciona el video आप दृश्यमान सामग्री को स्थायी रूप से प्राप्त करना चाहते हैं और डिस्पोज़िटिव को प्राप्त करने के लिए पाठ्य सामग्री का उपयोग करना चाहते हैं।
इंटरैक्टिव तत्वों को अलग दिखाना
जब आप अपने मेनू को वैयक्तिकृत करते हैं, तो सीएसएस आपके उपयोग के लिए इंटरैक्टिव तत्वों की क्षमता को बढ़ाता है। उदाहरण के लिए, एक रंगीन उपश्रेणी के तत्व को ध्यान में रखते हुए, एक चयनकर्ता के रूप में उपयोग करें:
#vertical-menu-float .vertical-menu-float-container .vertical-menu-float-wrapper > li > .nav-dropdown ul.sub-menu li> .nasa-title-menu:hover {
color: #eb1f28 !important;
}
मोबाइल में डिस्पोज़िटिव को अनुकूलित करने के लिए मीडिया क्वेरी एप्लिकेशन को शामिल करना आवश्यक है। लॉस इफ़ेक्टोस होवर सिंपल्स कोमो एस्टे मेजोरान ला यूसेबिलिडैड, बहुत सारे इंटरैक्टिव और विज़ुअलाइज़ेशन वाले मेनू देखने के लिए।
व्यावहारिक अभ्यास: वेब रियल में वीडियो अपलोड करना
कॉमर्सियो इलेक्ट्रॉनिकी और मार्कास इनोवाडोरस एम्पलीन के विभिन्न प्लेटफार्म सीएसएस पर वीडियो एस्टिलिज़ाडोस का फ़ाउंडोस इमर्सिव अनुभव बनाने के लिए.
- सुपर गूप: एक वीडियो ऊर्जा के बारे में मुख्य पृष्ठ पर ध्यान दें, इल्यूमिनाडो का उपयोग करें, रंगीन लैमेटिवोस का उपयोग करें और उत्पाद की गुणवत्ता को चिह्नित करने के लिए टॉमस का उपयोग करें। अपनी वीरता का शानदार प्रदर्शन करने के लिए।
- Polaroid: पोलेरॉइड यूएसए विज़ुअल्स ऑफ़ एटेरिजाज़ पेज ऑफ़ नॉस्टैल्जिकोस पैरा डेस्टैकर न्यू प्रोडक्ट्स डे कैमरा। लॉस वीडियो मल्टीपल्स एंगुलोस और कैपेसिडैड्स डेल प्रोडक्टो में, एक नेवेगसियन क्लारा ने लास पेजिनस क्लेव में लॉस यूसुअरियोस को डिरिगे किया।
- गोल्डी: कॉन टॉमस सर्केनास और बिएन कोऑर्डिनाडास, गोल्डे डेमुएस्ट्रा सस प्रोडक्टोस एंड मिशन। एल मेन्साजे ब्रेव सोब्रेपुएस्टो डेजा ए लॉस विजिटेंटस यूना कंप्रेशन इनमीडियाटा डे ला ऑफ़र्टा।
कॉम्पिटिबिलिडाड वाई एल रेंडिमिएंटो के लिए प्रमुख, समान विशेषताओं का उपयोग करने की आवश्यकता ऑटोप्ले, म्यूटेड, लूप और प्लेइनलाइन तत्व में <video>, आप एक तेज़ गति से काम करने की गारंटी के लिए अपने एस्टीलोस को समायोजित कर सकते हैं और सभी डिस्पोज़िटिवों के लिए एक दृश्य सुसंगतता प्रदान कर सकते हैं।
उपयोग fondos de video con CSS एक वेब साइट में आपको अपने दृश्य के साथ कथात्मकता का महत्व मिलता है, एक तरल अनुभव और एट्रैक्टिव अनुभव प्राप्त होता है। एचटीएमएल संरचना को ध्यान में रखते हुए, सीएसएस पर ध्यान केंद्रित करते हुए और सामग्री को प्रस्तुत करते हुए, आप आगंतुकों के लिए एक यादगार छाप बना सकते हैं और अपने अनुभव को बहुत सुंदर और सहज ज्ञान युक्त बना सकते हैं।
