कैसे अपने मुखपृष्ठ पर एक हीरो पृष्ठभूमि वीडियो एम्बेड करने के लिए

अपनी साइट के नायक अनुभाग में वीडियो पृष्ठभूमि का उपयोग करना सीखें & क्यों यह आपके व्यवसाय के लिए रूपांतरण दर बढ़ा सकता है.


कैसे एक हीरो वीडियो पृष्ठभूमि एम्बेड करने के लिए

यह कोई रहस्य नहीं है कि वेब पर दर्शकों की व्यस्तता को बढ़ावा देने के लिए वीडियो अविश्वसनीय रूप से प्रभावी हैं। जब लोग एक ही जानकारी को शब्दों के माध्यम से प्रस्तुत करते हैं तो लोग आश्चर्यजनक रूप से उच्च दर पर दृश्यों को याद करते हैं और याद करते हैं। हमारे दिमाग बस छवियों को तेजी से संसाधित करते हैं – एक वीडियो देखने के अनुभव का उल्लेख करने के लिए मजेदार नहीं है, रोमांचक है, और – काफी स्पष्ट रूप से, आदी। श्रोता वीडियो सामग्री का उपभोग करने के लिए एक अतृप्त भूख को साझा करते हैं, यही वजह है कि यह दो साल के भीतर अनुमानित है सभी वेब ट्रैफ़िक का 80% वीडियो से बंधा रहेगा!

आधुनिक वेब डिज़ाइन अधिक गतिशील दृश्यों के साथ अभी भी छवियों को बदलने की दिशा में एक बड़ा धक्का देख रहा है.

ट्वीट पर क्लिक करें

यह केवल ऐसे शब्द नहीं हैं जो एक महान शुद्ध अनुभव कर रहे हैं। आधुनिक वेब डिज़ाइन अधिक गतिशील दृश्यों के साथ अभी भी छवियों को बदलने की दिशा में एक बड़ा धक्का देख रहा है। वे दिन गए जब उपयोगकर्ता के जुड़ाव को संतुष्ट करने के लिए पाठ और फ़ोटो के स्थिर वेब पेज पर्याप्त थे। वीडियो वह जगह है जहाँ पर यह है – और अब खुद से यह पूछने का समय है कि क्या आपकी वेबसाइट पर इसकी अनुपस्थिति को अनदेखा किया जा सकता है.

शायद आपके द्वारा प्रारूप को अपनाने का मुख्य कारण इसकी कथित तकनीकी जटिलताओं के कारण है। हालांकि आपकी वेबसाइट पर वीडियो पाने के लिए कुछ अतिरिक्त प्रस्तुतिकरण और अनुकूलन की आवश्यकता हो सकती है, पिछले कुछ वर्षों में विभिन्न प्लगइन्स और एचटीएमएल 5 के साथ प्रक्रिया को पर्याप्त रूप से आसान बनाया गया है।.

अपनी वेबसाइट पर वीडियो कैसे एम्बेड करें, यह समझने में मदद के लिए, यह गाइड आपको यह दिखाने के लिए है कि एक आकर्षक दृश्य अनुभव बनाने के लिए आपको क्या जानने की आवश्यकता है जो उपयोगकर्ता जल्द ही नहीं भूलेंगे.

“हीरो” पृष्ठभूमि वीडियो

जब हम आपकी वेबसाइट पर वीडियो एम्बेड करने की बात करते हैं, तो हम किसी भी यादृच्छिक स्थान पर किसी भी प्रकार के वीडियो के बारे में बात नहीं कर रहे हैं। यह आलेख विशेष रूप से वेब डिज़ाइन में एक लोकप्रिय और प्रभावी प्रवृत्ति का उपयोग करने के बारे में है जिसे कहा जाता है हीरो बैकग्राउंड वीडियो.

यहाँ एक उदाहरण है:

गति और रोमांच का उदाहरण एक वीडियो पृष्ठभूमि को प्राप्त कर सकता हैयहां नायक पृष्ठभूमि वीडियो का उपयोग करके एक अच्छा उदाहरण दिया गया है। जैसा कि आप देख सकते हैं, वीडियो इसके लिए गति और रोमांच की भावना प्रदान करता है साइकल की दुकान अभी भी तस्वीरें हासिल नहीं कर सकी हैं.

हम पहले “में हीरो छवियों का उपयोग करने की अवधारणा का उल्लेख किया हैमुड़ाव के ऊपर“आपके वेब पेज का क्षेत्र। असंबद्ध के लिए, एक नायक छवि (या कभी-कभी बैनर कहा जाता है) अक्सर वह पहली चीज होती है जो लोग आपकी साइट पर पहुंचने पर देखते हैं, जहां इसकी सबसे महत्वपूर्ण सामग्री संक्षिप्त और नेत्रहीन ढंग से प्रस्तुत की जाती है। यह प्राथमिक खंड आम तौर पर एक चिकना पृष्ठभूमि छवि के साथ पूरे स्क्रीन की चौड़ाई और ऊंचाई को भरता है, एक महत्वपूर्ण कॉल के चारों ओर खुली जगह को एक्शन बटन या लिंक पर छोड़ देता है.

यहां एक ही अवधारणा लागू होती है, स्पष्ट रूप से छोड़कर अब हम पृष्ठभूमि छवि को एक वीडियो के साथ बदल रहे हैं। यह पहली बार एक अपेक्षाकृत महत्वहीन परिवर्तन की तरह लग सकता है: ठीक है, इसलिए हमारे पास साइकिल की सवारी करने वाले व्यक्ति की एक तस्वीर थी, लेकिन अब हमारे पास कार्रवाई में साइकिल का एक वीडियो है और सवारी के लिए लिया जा रहा है-बड़ा जो सही है?

गति में एक साधारण पल देखना उपयोगकर्ताओं को आपके ब्रांड के साथ कैसे अनुभव और संलग्न करेगा, इस पर एक जबरदस्त प्रभाव पैदा कर सकता है.

ट्वीट पर क्लिक करें

खैर, यह पता चला है कि गति में एक सरल क्षण को देखने से उपयोगकर्ताओं को आपके ब्रांड के साथ अनुभव करने और संलग्न करने का एक जबरदस्त प्रभाव पैदा हो सकता है। वीडियो किसी अन्य माध्यम की तुलना में भावनाओं और क्रिया को तेजी से प्रेरित करते हैं। यदि रूपांतरण आपका मुख्य उद्देश्य है, तो एक पृष्ठभूमि वीडियो एक सफल वेबसाइट के लिए गुप्त सॉस हो सकता है.

क्यों एक पृष्ठभूमि वीडियो का उपयोग करें?

वहाँ भारी सबूत है कि दिखाता है कि कैसे शक्तिशाली वीडियो एक व्यवसाय के लिए हो सकता है। यहां कुछ टैंटलाइजिंग आंकड़े दिए गए हैं फोर्ब्स द्वारा साझा किया गया कि प्रेरणा के रूप में सेवा करनी चाहिए:

  • अपने लैंडिंग पृष्ठ पर एक हीरो बैकग्राउंड वीडियो एम्बेड करना रूपांतरण दरों को 80% तक बढ़ा सकता है
  • उत्पाद वीडियो खरीदारी का निर्णय लेते समय 90% ग्राहकों को प्रभावित करने में मदद करते हैं
  • 64% ग्राहक इसके बारे में वीडियो देखने के बाद ऑनलाइन उत्पाद खरीदने की अधिक संभावना रखते हैं.
  • डिजिटल मार्केटिंग विशेषज्ञ जेम्स मैकक्वेरी का अनुमान है कि एक मिनट की वीडियो सामग्री 1.8 मिलियन शब्दों के लायक है.

एक नायक पृष्ठभूमि वीडियो का उदाहरणक्या आप देखना पसंद करेंगे राष्ट्रीय उद्यान, या आप बल्कि करेंगे अनुभव उन्हें?

तो अब जब हमने यह स्थापित कर लिया है कि वीडियो सामग्री इतनी महत्वपूर्ण क्यों है, तो आइए देखें कि इन रफ़ू चीज़ों को अपनी वेबसाइट पर कैसे लाया जाए!

अपनी वेबसाइट पर पृष्ठभूमि वीडियो एम्बेड करना

यह सच है कि वेब फ़ाइल पर वीडियो एम्बेड करने के लिए विभिन्न स्तरों, ब्राउज़र समर्थन के विभिन्न स्तरों, और अलग-अलग तरीकों को चुनना है – लेकिन मैं इसे यथासंभव सरल बनाने जा रहा हूं और आपको केवल सबसे प्रासंगिक जानकारी बताऊंगा , कदम से कदम, सभी संभव उपयोगकर्ताओं के लिए अधिकतम संगतता प्राप्त करने के लिए.

अपने वीडियो बनाम स्वयं की मेजबानी एक होस्टिंग सेवा का उपयोग करना

सबसे पहले आपको यह निर्धारित करना होगा कि वीडियो फ़ाइलों का वास्तव में निवास कहाँ होगा: आपकी वेबसाइट के स्वयं के सर्वर पर (दूसरे शब्दों में, आपका अपना वेब होस्टिंग खाता) या YouTube या Vimeo जैसे वीडियो होस्टिंग प्लेटफ़ॉर्म पर.

कुछ स्व-होस्टिंग वीडियो के फायदे यह कैसे एम्बेडेड है, वीडियो को पूर्ण स्क्रीन बनाने में आसान कार्यान्वयन और विमुद्रीकरण पोर्टल के पीछे वीडियो की सुरक्षा में अधिक नियंत्रण के साथ अधिक से अधिक स्वतंत्रता शामिल है (इसके लिए एक कुशल बैक-एंड डेवलपर को किराए पर लेना आवश्यक होगा).

कुछ वीडियो प्लेटफॉर्म के फायदे थोड़ा आसान एम्बेडिंग, तेज़ विश्व-स्तरीय सर्वरों का उपयोग (जो आपके स्वयं के सर्वर पर बैंडविड्थ को हल्का करता है) का उपयोग विशेष रूप से वीडियो फ़ाइलों के लिए अनुकूलित, और अधिक व्यापक साझाकरण क्षमता शामिल है.

आमतौर पर, एक वेबसाइट पर सामान्य प्रयोजन के वीडियो के लिए, मैं आपकी सामग्री की सेवा के लिए वीडियो प्लेटफॉर्म का उपयोग करने में आसानी की सिफारिश करूंगा, खासकर यदि आपकी साइट साझा होस्टिंग योजना पर है। हालांकि, एक पृष्ठभूमि नायक वीडियो की बारीकियों के लिए कुछ सेटिंग्स की आवश्यकता होती है जो स्वयं को बेहतर होस्टिंग प्रदान करती हैं। आपके पास या तो विधि का उपयोग करने के लिए आपके कारण हो सकते हैं, इसलिए मैं दोनों के लिए निर्देश प्रदान करूंगा.

विधि 1: स्वयं-होस्टिंग

सबसे पहले, वीडियो को आपके सर्वर पर मौजूद होना चाहिए। हम चर्चा करेंगे कि आपको किस प्रकार की वीडियो फ़ाइल की आवश्यकता है – लेकिन अभी के लिए, छवियों को जोड़ने की तरह, आपको एक का उपयोग करने की आवश्यकता होगी एफ़टीपी कार्यक्रम अपने सर्वर पर अपनी वीडियो फ़ाइल अपलोड करने के लिए.

अब हम जादू की सेवा करने के लिए आपके वेब पेज में सही कोड डालेंगे। HTML5 के उपयोग की अनुमति देता है टैग, जो वीडियो के लिए पसंदीदा वेब प्रारूप के रूप में फ्लैश को धन्यवाद देता है। यहां हमें एक उचित पूर्ण स्क्रीन पृष्ठभूमि वीडियो बनाने की आवश्यकता है:

एचटीएमएल

कोड का चयन करें

सीएसएस

वीडियो # bgvideo {
स्थिति: निश्चित;
शीर्ष: 50%;
बाएं: 50%;
न्यूनतम-चौड़ाई: 100%;
न्यूनतम ऊंचाई: 100%;
चौड़ाई: ऑटो;
ऊंचाई: ऑटो;
z-index: -100;
-एमएस-ट्रांसफॉर्म: ट्रांसलेक्स (-50%) ट्रांसली (-50%);
-moz-transform: TranslateX (-50%) TranslY (-50%);
-webkit-transform: translateX (-50%) TranslY (-50%);
रूपांतर: TranslX (-50%) TranslY (-50%);
पृष्ठभूमि: url (प्लेसहोल्डर। jpg) नो-रिपीट;
पृष्ठभूमि का आकार: कवर;
} कोड चुनें

यहां काफी कुछ चल रहा है, तो आइए एक नजर डालते हैं कि इन सेटिंग्स का क्या मतलब है.

playsinline

यह वीडियो को ब्राउज़र के भीतर रखता है और आपकी सामग्री के साथ है, जो इसे सही मायने में पूर्ण स्क्रीन पर जाने से रोकने के लिए महत्वपूर्ण है, जहां आपकी पूरी स्क्रीन वीडियो के कब्जे में है और कुछ नहीं.

स्वत: प्ले

आप संभवतः सबसे अधिक चाहते हैं कि नायक पृष्ठभूमि वाला वीडियो “प्ले” बटन से टकराने की आवश्यकता के बिना पेज लोड होते ही तुरंत चला जाए। मोबाइल उपयोगकर्ताओं के लिए इसके साथ कुछ समस्याएं हैं, हालांकि, मैं बाद में बात करूंगा.

मौन

जब तक आपके वीडियो में इसके ऑडियो ट्रैक में आवश्यक जानकारी नहीं होती, तब तक आपके बैकग्राउंड वीडियो को म्यूट करना सबसे अच्छा है। वेब पर सर्फिंग के दौरान लोगों को अप्रत्याशित ऑडियो के साथ अभिवादन करने के लिए अत्यधिक अरुचि है, इसलिए अपने उपयोगकर्ताओं को बंद करने की तुलना में ध्वनि को बंद करना बेहतर है.

पाश

दोहराने पर आपके वीडियो को चलाने का विकल्प केस-बाय-केस आधार पर बनाया जाना चाहिए। यदि आप अंतिम विद्या की भावना चाहते हैं, जहां वीडियो बिना किसी विकर्षण के कार्रवाई के लिए स्पष्ट कॉल के साथ समाप्त होता है, तो यह समझ से बाहर होगा.

पोस्टर

एक छवि फ़ाइल की आपूर्ति यहाँ एक प्लेसहोल्डर के रूप में कार्य करेगी जब तक कि वीडियो लोड करना और खेलना समाप्त न हो जाए। यह आपके विवेक पर निर्भर करता है कि प्रदर्शन के लिए सबसे उपयुक्त क्या होगा, फिर चाहे वह वीडियो के पहले फ्रेम का हो या लोगो या बैनर जैसा कुछ हो.

हमारी सीएसएस सेटिंग्स अनिवार्य रूप से ब्राउज़र को पूरे पृष्ठ में वीडियो को फैलाने का निर्देश देती हैं। ध्यान दें यहाँ है पृष्ठभूमि हमारे उसी का उपयोग करके सेटिंग करना पोस्टर छवि; यह एक दृश्य के रूप में कार्य करता है, यदि किसी विरोधी ब्राउज़र को पहचान नहीं पाता है संपत्ति.

यदि आप पृष्ठभूमि वीडियो पर पाठ या कॉल टू एक्शन बटन प्रदर्शित करना चाहते हैं, तो आप उन्हें हमेशा की तरह जोड़ सकते हैं div.

विधि 2: YouTube या Vimeo

इस विधि का उपयोग वीडियो फ़ाइलों को आपकी साइट से दूर रखेगा, जहां वे इसके बजाय समर्पित सर्वर पर रहते हैं जो वीडियो सामग्री के विशेषज्ञ हैं। यह मानते हुए कि आपने अपना वीडियो पहले ही अपलोड कर दिया है, अब आपको इसकी आवश्यकता होगी लिंक एम्बेड करें. YouTube के लिए यह वीडियो के पेज पर “शेयर” बटन दबाकर और फिर “एम्बेड” पर क्लिक करके पाया जाता है। Vimeo के लिए आप इसी तरह “शेयर” पर क्लिक करेंगे और फिर पॉपअप विंडो पर दिखाए गए एम्बेड लिंक को कॉपी करेंगे.

जल्द सलाह: “शेयर” बटन का उपयोग करते समय, YouTube और Vimeo ऑटोप्ले, लूप जैसी सेटिंग्स के लिए विकल्प प्रदान करेगा और चैनल नियंत्रणों को दिखाएगा। सुनिश्चित करें कि आप आसानी से समायोजित नहीं करते कि आपका वीडियो कैसे प्रदर्शित होता है। Vimeo भी आवश्यकता हो सकती है अतिरिक्त सेटिंग्स इसके लिए पृष्ठभूमि वीडियो के रूप में ठीक से काम करने के लिए.

आप देख सकते हैं कि ये एम्बेड लिंक एक में समाहित हैं iframe टैग, जो हमारे HTML5 तत्व की तुलना में थोड़ा अलग व्यवहार करता है। इन वीडियो को पूर्ण स्क्रीन पृष्ठभूमि के रूप में काम करने के लिए हमें अपने मार्कअप के साथ थोड़ा ट्विकिंग करने की आवश्यकता होगी। द्वारा विधि के लिए धन्यवाद ऋषभ अग्रवाल, ऐसा करने के लिए एक सरल समाधान है:

एचटीएमएल

कोड का चयन करें

सीएसएस

.वीडियोकंटेनर {
स्थिति: निरपेक्ष;
चौड़ाई: 100%;
ऊंचाई: 100%;
शीर्ष: 0;
बायां: 0;
नीचे: 0;
सही: 0;
प्रदर्शन: फ्लेक्स;
फ्लेक्स-दिशा: स्तंभ;
औचित्य-सामग्री: केंद्र;
संरेखित-आइटम: केंद्र;
}
#नायक {
स्थिति: रिश्तेदार;
}
iframe {
/ * वैकल्पिक * /
चौड़ाई: 100%;
ऊंचाई: 100%;
} कोड चुनें

आपके YouTube या Vimeo अपलोड को अब आपके नायक सामग्री के पीछे एक कार्यात्मक पृष्ठभूमि वीडियो के रूप में व्यवहार करना चाहिए.

वर्डप्रेस का उपयोग करना

यदि आप वर्डप्रेस का उपयोग कर रहे हैं, तो एक हैं वीडियो पृष्ठभूमि प्लगइन्स की विविधता कि कोड के बारे में चिंता किए बिना उपरोक्त कार्य पूरा कर सकते हैं। हालाँकि, इनमें से अधिकांश प्रीमियम प्लगइन्स हैं जिन्हें आपको खरीदना पड़ सकता है.

युक्तियाँ और वीडियो एम्बेड करने के लिए सर्वोत्तम अभ्यास

अब जब आपका वीडियो सफलतापूर्वक आ गया है और कार्रवाई में है, तो आइए अनुकूलन, फ़ाइल आकार की जटिलताओं में थोड़ा और खोदें और अपने नायक की पृष्ठभूमि वीडियो को देखने और उसके सबसे अच्छे रूप में संचालन सुनिश्चित करें।.

फ़ाइल प्रकार को समझना

मैंने पहले कहा है कि वीडियो फ़ाइल प्रकारों में कई विकल्प उपलब्ध हैं, जिनमें से कुछ सबसे लोकप्रिय हैं mp4, ogg, तथा webm. आधुनिक दिन के ब्राउज़र लगभग सार्वभौमिक रूप से स्वीकार करते हैं mp4 प्रचलित प्रारूप के रूप में, इसलिए बहुत कम से कम यह फ़ाइल प्रकार है जिसे आपको शामिल करना होगा। हालांकि, आमतौर पर यह सुनिश्चित करना एक अच्छा विचार है कि सभी उपयोगकर्ता एक समान अनुभव प्राप्त करते हैं, भले ही वे पुराने सॉफ्टवेयर पर हों; किस मामले में, आपका मार्कअप इस तरह दिखेगा:

कोड का चयन करें

जल्द सलाह: स्रोत सूची में अंतिम रूप से अपना पसंदीदा फ़ाइल प्रारूप डालें। यह वही है जो ब्राउज़र अंतिम बार पढ़ेगा, और, यदि उपयोगकर्ता का डिवाइस इसका समर्थन करता है, तो वह लोड करने वाला होगा.

विचार करने के लिए एक और तकनीकी है वीडियो कोडेक उपयोग करने के लिए, जो मूल रूप से फ़ाइल को कैसे संपीड़ित किया जाता है और फिर ब्राउज़र के मीडिया प्लेयर द्वारा व्याख्या की जाती है। प्रमुख कोडेक आपको संबंधित होना चाहिए 264, जो कि अधिकांश ब्राउज़र स्वीकार करते हैं और YouTube और Vimeo जैसी साइटें किसका समर्थन करती हैं.

अगर यह सब भ्रामक शब्दजाल जैसा लगता है, तो चिंता न करें। संभावना है कि आपका वीडियो पहले से ही वांछित है mp4 / 264 प्रारूप। यह आमतौर पर फ़ाइल प्रकार है जो आपको स्टॉक वीडियो साइट से डाउनलोड करते समय दिया जाता है। यदि आपको एक अलग फ़ाइल प्रकार को mp4 में बदलना है, तो आपको ऐसा करने के लिए अतिरिक्त सॉफ़्टवेयर की आवश्यकता होगी. एडोब प्रीमियर प्रो वीडियो के साथ काम करने के लिए उद्योग मानक है, लेकिन यह ज्यादातर लोगों के साधनों से परे है। सौभाग्य से पीसी और मैक नामक एक मुफ्त कार्यक्रम है HandBrake आपको वही चाहिए जो आपको चाहिए.

ऑडियो के साथ एक नायक पृष्ठभूमि वीडियो का एक उदाहरणसामूका-जिन्जा तीर्थ वीडियो के साथ एक सुंदर और सुखदायक अनुभव बनाता है (और ऑडियो – लेकिन आप देखेंगे कि इस मामले में यह स्वीकार्य क्यों है)। उनके नेविगेशनल मेनू के साथ वीडियो के चतुर एकीकरण पर ध्यान दें.

अपने वीडियो फ़ाइल का अनुकूलन

यह शायद आपके वीडियो को लेने के लिए एक अच्छा विचार नहीं है क्योंकि यह वर्तमान में खड़ा है और इसे सीधे अपनी वेबसाइट पर अपलोड करें। यदि वे उच्च या अल्ट्रा डेफिनिशन में हों तो वीडियो फाइलें बड़ी हो सकती हैं – यहां तक ​​कि 30 सेकंड क्लिप भी। याद रखें कि आपके उपयोगकर्ताओं को खेलने से पहले अपने ब्राउज़र पर इन फ़ाइलों को डाउनलोड करना होगा, और 50 मेगाबाइट वीडियो को लोड करने के लिए इंतजार करना एक महान उपयोगकर्ता अनुभव के लिए अनुकूल नहीं है।.

आपको अपने वीडियो को ट्विक करना होगा संकल्प, बिट दर, तथा लंबाई एक इष्टतम फ़ाइल आकार में सुधार करने के लिए। इस काम को देखें मार्गदर्शक कैसे वेब के लिए वीडियो तैयार करने के लिए एक त्वरित ठहरने के लिए.

तो कितना बड़ा है? यह आमतौर पर माना जाता है 5 मेगाबाइट फ़ाइल आकार के साथ एक पृष्ठभूमि वीडियो के लिए अधिकतम आकार है 1 मेगाबाइट से कम आदर्श होने के नाते। गुणवत्ता और आकार के बीच संतुलन बनाने के लिए इसे हासिल करना काफी मुश्किल हो सकता है। शुरुआत के लिए, अपने संकल्प को आसपास रखें 720p या स्पष्टता और अर्थव्यवस्था के अच्छे मिश्रण के लिए कम। एक तेज 4K वीडियो बहुत खूबसूरत लग सकता है, लेकिन यह ध्यान में रखें कि अधिकांश लोग 15 video से कम स्क्रीन पर वेब ब्राउज़ करते हैं, इसलिए जोड़ा गया रिज़ॉल्यूशन केवल शानदार होगा.

लंबाई के संदर्भ में, एक आदर्श रनटाइम कहीं के बीच होगा 10-30 सेकंड. यदि यह बहुत छोटा है, तो आपका वीडियो तुच्छ महसूस कर सकता है या, यदि यह लूप हो गया है, तो दोहराव भी। एक वीडियो जो बहुत लंबा है, जो उपयोगकर्ताओं का ध्यान खोने और फ़ाइल आकार बढ़ाने का जोखिम उठाता है.

बिट दर फ़ाइल आकार पर एक महत्वपूर्ण प्रभाव डालती है, और शायद यही वह है जो आप अपने अधिकांश प्रयासों को साझा करने में खर्च करेंगे। आपके वीडियो के लिए आदर्श संख्या खोजना एक ऐसी प्रक्रिया है जो इस लेख के दायरे से परे है, लेकिन YouTube और Vimeo फ़ाइल अनुकूलन पर दिशानिर्देश प्रदान करते हैं यहाँ तथा यहाँ क्रमशः जो आपको सही दिशा में आगे बढ़ने में मदद करे.

ऑडियो निकाल रहा है

जैसा कि पहले बताया गया है, आपके बैकग्राउंड वीडियो को म्यूट करना पसंदीदा UX अभ्यास है। अगर वास्तव में ध्वनि को बजाने का कोई कारण नहीं है, तो आप वास्तव में वीडियो को म्यूट करने से आगे बढ़ सकते हैं और ऑडियो ट्रैक को फ़ाइल से पूरी तरह से हटा सकते हैं। ऐसा करने से अनावश्यक डेटा से छुटकारा पाने से फ़ाइल का आकार बहुत कम हो जाएगा। यह आपके सर्वर पर कम बैंडविड्थ और आपके उपयोगकर्ताओं के लिए तेजी से लोड होने का अनुवाद करता है. HandBrake फ़ाइलों से ऑडियो ट्रैक्स को आसानी से हटाने का एक अच्छा विकल्प है.

ऑटोप्ले और मोबाइल डिवाइस

मैंने उल्लेख किया कि मोबाइल उपयोगकर्ताओं के लिए ऑटोप्ले सेटिंग का उपयोग करने के साथ एक छोटी सी चेतावनी थी। अवांछित डेटा उपयोग को रोकने के लिए सुरक्षा सावधानी के रूप में, कई मोबाइल फोन वेब पर ऑटोप्ले वीडियो से मना कर देंगे। इसका मतलब है कि आपके बैकग्राउंड वीडियो के ऊपर एक प्ले बटन एक ओवरले के रूप में एम्बेडेड होगा। हालांकि यह एक मामूली उपद्रव है, लेकिन असली जलन यह है कि यह ओवरले संभावित रूप से आपके हीरो सेक्शन में रखी गई किसी भी लिंक या सामग्री को कवर कर सकता है। रवींद्र!

ऐसा प्रतीत होता है कि iOS के नवीनतम संस्करण अब ऑटोप्ले फीचर का समर्थन करते हैं, लेकिन कई एंड्रॉइड फोन और अन्य मोबाइल ऑपरेटिंग सिस्टम अभी भी धब्बेदार हैं। यद्यपि जटिल जावास्क्रिप्ट वर्कअराउंड और ब्राउज़र हैक इस समस्या को हल कर सकते हैं, उनकी विश्वसनीयता असंगत है और पूरी तरह से अनुशंसित नहीं है। सबसे सुसंगत उपयोगकर्ता अनुभव के लिए सबसे अच्छा समाधान शायद पूरी तरह से मोबाइल उपकरणों पर वीडियो को हटाने और इसे अपने होल्डर छवि के साथ बदलने के लिए मीडिया क्वेरी का उपयोग करना हो सकता है। ऐसा करने के लिए, इसे अपनी CSS फ़ाइल में रखें:

@मीडिया स्क्रीन और (अधिकतम-डिवाइस-चौड़ाई: 768px) {
#नायक {
पृष्ठभूमि: url (प्लेसहोल्डर। jpg) नो-रिपीट;
पृष्ठभूमि का आकार: कवर;
}
#bgvideo {
कुछ भी डिस्प्ले मत करो;
}
} कोड चुनें

कंट्रास्ट पाठ & वीडियो

सर्वोत्तम दृश्य अनुभव के लिए, आप यह सुनिश्चित करना चाहते हैं कि आपका पाठ सुपाठ्य है और इसके पीछे वीडियो से बाहर खड़ा है। किसी गहरे रंग के वीडियो या हल्के वीडियो पर गहरे पाठ का उपयोग करने से यह सुनिश्चित होगा कि आपके उपयोगकर्ता आपके मुख्य अनुभाग की कार्रवाई में महत्वपूर्ण सामग्री या कॉल को याद नहीं करेंगे।.

उन रंगों का उपयोग करने का प्रयास करें जो एक निश्चित रंग पैलेट का अनुसरण करते हैं – और भी बेहतर अगर वे रंग आपके ब्रांड की शैली गाइड से मेल खाते हों। बहुत सारे रंगों वाला एक पृष्ठभूमि वीडियो आपकी वेबसाइट पर जगह से बाहर दिख सकता है या इसके ऊपर के पाठ से बहुत विचलित हो सकता है.

ओवरले और फिल्टर को लागू करने के लिए आपके वीडियो के दृश्य टोन को बदलने के लिए एक प्रभावी तरीका है। यह एडिटिंग सॉफ्टवेयर जैसे एडोब प्रीमियर या आधुनिक ब्राउजर पर भी सीएसएस के जरिए किया जा सकता है फिल्टर संपत्ति। अपने वीडियो के सौंदर्य को ठीक करने के लिए रंग ओवरले, संतृप्ति, ब्लर और अपारदर्शिता के साथ प्रयोग करने का प्रयास करें ताकि यह आपके ब्रांड की शैली से मेल खाए और पाठ से विचलित न हो.

आकर्षक संपादन के साथ हीरो बैकग्राउंड उदाहरण फ्रेशडिजाइन एजेंसी एक सार और चरित्र को व्यक्त करने के लिए आकर्षक संपादन का उपयोग करता है, यह देखने के लिए दिलचस्प है कि कोई फर्क नहीं पड़ता कि यह कितनी बार लूप करता है। रंग फ़िल्टर पाठ और लोगो के साथ अच्छी तरह से विरोधाभासी है.

जहां अपने पृष्ठभूमि के लिए वीडियो खोजने के लिए

अब आप अपनी वेबसाइट पर एक प्रभावी और पूरी तरह से अनुकूलित पृष्ठभूमि वीडियो जोड़ने के लिए तैयार हैं … इसके अलावा, अब आपको वास्तविक वीडियो की आवश्यकता है! तो तुम एक कहाँ हो??

सबसे आसान और कम खर्चीला उपाय यह है कि वहां मौजूद कई स्टॉक फुटेज वेबसाइटों में से किसी एक से वीडियो सामग्री खरीदी जाए. iStock, Shutterstock, भंग, Coverr और भी Vimeo रॉयल्टी मुक्त पेशेवर गुणवत्ता वाले फुटेज प्राप्त करने के लिए महान संसाधन हैं.

जल्द सलाह: स्टॉक फुटेज ब्राउज़ करते समय सावधानी का एक शब्द। बस इसे इस्तेमाल करने के लिए इसका इस्तेमाल न करें। एक वीडियो को आपकी साइट के संदेश में जोड़ना होगा और मौजूद होने का कारण अर्जित करना होगा। कई स्टॉक वीडियो सामान्य रूप से सामान्य और ब्लैंड दिखते हैं, और उनका एक आकार-फिट-सभी प्रकृति आपकी वेबसाइट को ऊंचा या आगे बढ़ाने के लिए कुछ नहीं कर सकती है..

सर्वोत्तम परिणामों के लिए, आप एक क्रिएटिव एजेंसी या फ्रीलांस वीडियोग्राफ़र को कस्टम-कस्टम फुटेज प्रदान करना चाहेंगे जो वास्तव में आपके उत्पाद या ब्रांड के सार के साथ उपयोगकर्ताओं को संलग्न करेगा। मैं आपके निकटतम महानगरीय क्षेत्र के आसपास की एजेंसियों या उत्पादन कंपनियों के लिए एक Google खोज करने का सुझाव दूंगा और उनके विभागों पर एक नज़र डालूंगा। अपने विकल्पों को तौलने के लिए कुछ अलग लोगों से एक प्रस्ताव और मूल्य अनुमान प्राप्त करें। यह हालांकि सबसे महंगा विकल्प होगा और हजारों की लागत सिर्फ एक वीडियो पृष्ठभूमि के लिए हो सकती है.

फ्रीलांसिंग साइट्स जैसे Upwork या Fiverr अधिक बजट के अनुकूल हो सकता है, लेकिन यह उत्पादन मूल्यों या देयता को प्रदान करने पर थोड़ी सी बकवास है.

निष्कर्ष

हर कोई एक अच्छा वीडियो पसंद करता है। हम उनके लिए चूसने वाले प्रतीत होते हैं- हम उनके टीवी, कंप्यूटर, फोन, टैबलेट, हमारी डेस्क पर, हमारी सोफे पर, हमारी कारों में, हर जगह और कहीं भी हम उन्हें देख सकते हैं।.

यह कहा गया है कि वेब पर 95% जानकारी भाषा लिखी जाती है। हालांकि, वर्तमान अनुमानों और रुझानों के साथ वे जिस तरह से हैं, हमारे इंटरनेट ब्राउज़िंग अनुभव जल्द ही वीडियो के लिए भारी हो सकते हैं। यह समझ में आता है, यह देखते हुए कि शब्दों की तुलना में प्रेरणादायक कार्रवाई में कितने अधिक प्रभावी वीडियो हैं.

यद्यपि प्रत्येक व्यवसाय या वेबसाइट को अपने ब्रांड को व्यक्त करने के लिए पृष्ठभूमि वीडियो की आवश्यकता नहीं होती है, लेकिन इस बात की प्रबल संभावना है कि कोई आपकी मदद करेगा। अब जब आप जानते हैं कि आपको अपनी वेबसाइट पर कैसे एम्बेड करना है, तो मैं आपको यह देखने के लिए प्रोत्साहित करता हूं कि एक हीरो बैकग्राउंड वीडियो आपके व्यवसाय को कितनी दूर ले जाएगा.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map