यूट्यूब वीडियो को कैसे मोबाइल फ्रेंडली बनाये ( Responsive Video)

Posted :| Posted By: Piush Trivedi | Labels: , 50 Comments
Posted by: Piush


   हिंदी ४ टेक के पिछले लेख में मैंने बताया था की कैसे अपने ब्लॉग या वेबसाइट को मोबाइल फ्रेंडली स्क्रीन रेसोलुशन में बदला जाये , ब्लॉग टेम्पलेट responceive स्वरुप में बदलने के बाद सबसे पहला कदम ब्लॉग पर रखे गए youtube  वीडियो   को मोबाइल फ्रेंडली  responsive बनाना।  आज के इस लेख में बताया है की कैसे विभिन्न स्क्रीन रेसोलुशन पर Youtube वीडियो को एम्बेड किया जाये। यूट्यूब वीडियो स्वतः मोबाइल फ्रेंडली बनाने के लिए निम्न दो विकल्पों का इस्तेमाल कर सकते है  - 
  •  आप एक मोबाइल फ्रेंडली डिज़ाइन से अपने ब्लॉग टेम्पलेट बदले , जिससे  सभी मौजूदा सामग्री स्वयं ब्राउज़र विंडो आकार के अनुसार समायोजित हो जाती है । 
  • आप एक नया ब्लॉग या वेबसाइट बनाये और सभी नए एम्बेडेड वीडियो मोबाइल फ्रेंडली  आकार में बदले । 

    गूगल "ऑटो यूट्यूब वीडियो " सर्च करने पर ढेरो  साइटों पर इस हेतु  टिप्स  मिल जायेंगे  - मगर जहाँ तक मैंने देखा है उन तमाम ब्लॉग पर सुझाई गई टिप्स बेहत  पेचीदा है , इसी कड़ी में आज के इस लेख में बताया है की कैसे एक साधारण सी स्क्रिप्ट से youtube embed वीडियो को मोबाइल फ्रेंडली बनाया जाये , बस नीचे बताये कुछ आसान चरण अपनाये और कुछ ही पलो में बताई गयी टिप्स आपके ब्लॉग पर सक्रिय-----  

इस लेख द्वारा आपको  तीन चरणो का पालन करना है  - 
  •  अपने सभी मौजूदा वीडियो का कोड नीचे बताये कोड से बदलने की जरुरत है ।
  •  नए वीडियो के लिए, आप नए स्वरूप में उन्हें डालने के लिए विकल्प का अवश्य ख्याल रखे । 
  • "56.25%" वास्तव में वीडियो के डिस्प्ले मोड का  अनुपात है। सबसे नए वीडियो इस श्रेणी में आते हैं, दूसरे  वीडियो  ठीक से प्रदर्शित करने के लिए इस कोड को पुराने कोड से बदले । 

यहाँ आप किसी भी मौजूदा कोड को बदलने की जरूरत नहीं है, जहां इस हेतु एक आसान समाधान है। आपको बस अपने एम्बेड youtube iframe में  कुछ लाइनें डालनी  है। 

Step 1 :-

 आवश्यकता: इस प्रक्रिया को पूरी करने के लिए jQuery JavaScript की आवश्यकता है। तो सबसे पहले अपने ब्लॉग शीर्ष <head>  में निम्नलिखित कोड  को जोड़े ।
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

Step 2 :-

अपने ब्लॉग के <head> टैग के ठीक पहले नीचे बताया गया पूरा कोड डाले
<script src="https://cdn.rawgit.com/skipser/youtube-autoresize/master/youtube-autoresizer.js"></script>

Step 3 :-

अगर ऊपर बताया कोड आपके ब्लॉग पर काम नहीं कर रहा है तो इस नए स्क्रिप्ट कोड को अपने ब्लॉग पर यथावत डाले और परिवर्तन सहेजे
/*
* Youtube video auto-resizer script
* Created by https://hindi4tech.blogspot.com
*/
$(document).ready(function() {
if(typeof YOUTUBE_VIDEO_MARGIN == 'undefined') {
YOUTUBE_VIDEO_MARGIN=5;
}
$('iframe').each(function(index,item) {
if($(item).attr('src').match(/(https?:)?\/\/www\.youtube\.com/)) {
var w=$(item).attr('width');
var h=$(item).attr('height');
var ar = h/w*100;
ar=ar.toFixed(2);
//Style iframe
$(item).css('position','absolute');
$(item).css('top','0');
$(item).css('left','0');
$(item).css('width','100%');
$(item).css('height','100%');
$(item).css('max-width',w+'px');
$(item).css('max-height', h+'px');
$(item).wrap('<div style="max-width:'+w+'px;margin:0 auto; padding:'+YOUTUBE_VIDEO_MARGIN+'px;" />');
$(item).wrap('<div style="position: relative;padding-bottom: '+ar+'%; height: 0; overflow: hidden;" />');
}
});
});

 यह काम किस प्रकार करता है। 

बताई गयी स्क्रिप्ट पेज में youtube वीडियो iframe को स्वतः ही मोबाइल फ्रेंडली संस्करण के साथ उन्हें बदल देता है। उदाहरण के लिए, यहाँ एक एम्बेडेड यूट्यूब iframe को नए कोड के साथ बदलने का तरीका बताया गया है -
<div style="max-width:560px;margin:0 auto; padding:5px;">
<div style="position: relative;padding-bottom: 56.25%; height: 0; overflow: hidden;">
<iframe width="560" height="315" frameborder="0" allowfullscreen="" src="https://www.youtube.com/embed/hzixp8s4pyg?showinfo=0" style="position: absolute; top: 0px; left: 0px; width: 100%;
height: 100%; max-width: 560px; max-height: 315px;"></iframe>
</div>
</div>
आप देख सकते हैं, उक्त कोड में youtube iframe को एक div टैग से बदला गया है वीडियो शुरू में मूल आकार में दिखाई देंगे और जैसे ही ब्राउज़र चौड़ाई कम होती है, तो यह उसके अनुसार स्वतः ही मोबाइल आकर में रूपांतरित हो जायेगा । 

Step 4 :-

ऊपर उदाहरण में बताये गए div टैग से अपने ब्लॉग पोस्ट के youtube iframe कोड को बदले .....

Livedemo

Mobile Version Cheak



Do you Like this Article?

rss twitter facebook
Get Subscribe to Free Email Updates!!
*Your email address will not be shared with anyone.

Post A Comment Blogger Disqus

50 टिप्‍पणियां:


लेख पर अपनी प्रतिक्रिया अवश्य दे..
ध्यान दे !!:-
• हिंदी में प्रतिक्रिया देने के लिए यहाँ क्लिक करे
• टिप्पणी में Html Code डाला जा सकता है
• टिप्पणी में Image डालने के लिए [im]Your Image Link [/im] कोड का उपयोग करे
• टिप्पणी में Youtube Video डालने के लिए [youtube]Youtube Video Link [/youtube] कोड का उपयोग करे
• टिप्पणी में Smiley's का उपयोग करने के लिए बताये गए कोड को डाले
• टिप्पणी प्रकाशन में कोई परेशानी है तो यहां क्लिक करें..
Regards, Hindi4Tech
:) :-) :)) =)) :( :-( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ :-$ (b) (f) x-) (k) (h) (c) cheer

  1. This is superb.. Awesome post. Great information. Thanks for sharing this post with us. seo services in India

    जवाब देंहटाएं
  2. @tanu, @Sudheer,@Mahaveer,@abhieet First Thanks For Visiting Hindi4Tech.... & Thanks For Giving Us Your Opinion ... Hope Our Articles Giving You A Best Tech Update... Thanks To All Of You.... :>)

    जवाब देंहटाएं
  3. इस टिप्पणी को लेखक द्वारा हटा दिया गया है.

    जवाब देंहटाएं
  4. Thanks you for sharing the unique content. you have done a great job. thank you for sharing such a unique content.
    Android training in chennai

    जवाब देंहटाएं
  5. I am a regular reader of your blog. the blog is very interesting
    and will be much useful for us.
    ROI Services in Chennai

    जवाब देंहटाएं
  6. It's a best article about handle the future technology. Thanks for taking the time to discuss this, I feel happy about and I like to learning more about this topic. keep sharing your information regularly for my future reference.
    This content creates a new hope and inspiration with in me. Thanks for sharing article like this. The way you have stated everything above is quite awesome. Keep blogging like this. Thanks.
    ROI Services in Chennai

    जवाब देंहटाएं
  7. क्या आपको यह पता है कि रावण की मृत्यु के बाद सूपर्णखा सीता से मिलने जंगल आई थी, ये हुआ था..!

    भारतीय इतिहास की सबसे महत्वपूर्ण घटना राम और रावण से जुडी हुई है, इसके बारे में तो सभी लोग जानते ही होंगे। रामायण राम और रावण को मिला कर के ही बनी हुई है। सीता के अपहरण का बदला लेने के लिए राम ने रावण का वध कर दिया, लेकिन कोई और भी था जो सीता से मिलने के लिए बेसब्री से इंतज़ार कर रहा था। वह कोई और नहीं बल्कि रावण की बहन सूपर्णखा थी (Surpanakha Met Sita in forest after death of Rawan)।
    राम और रावण के बीच युद्ध के पीछे इसी का हाथ था। सूपर्णखा का बदला अब तक पूरा नहीं हुआ था। जब सूपर्णखा ने सुना कि राम ने सीता हो बचा लिया है, तब उसने खुद ही बदला लेने की ठानी। सूपर्णखा ने याद किया कि कैसे राम और लक्षमण ने मिलकर उसकी बेइज्जती की थी और उसकी गरीमा छीनकर उसकी नाक काट दी थी। अपनी बहन की बेइज्जती का बदला लेने के लिए रावण ने सीता को धोखे बंदी बनाकर राम से बदला लेने का निर्णय लिया। राम ने अपनी पत्नी को बचाने के लिए रावण का वध कर दिया।
    लंका में युद्ध जीतने के बाद राम अपनी पत्नी सीता और भाई लक्षमण के साथ अयोध्या लौट आये। अयोध्या आने के बाद यहाँ के निवासियों ने सीता की पवित्रता पर प्रश्नचिन्ह लगा दिया और राम को मजबूर कर दिया कि वह सीता को छोड़ दें। सीता एक आज्ञाकरी पत्नी की तरह अपने पेट में पल रहे बच्चे के साथ अयोध्या छोड़ दिया। सीता सीधे घने जंगल की तरफ बढ़ी, वह उन्हें वाल्मीकि मिले जो उन्हें अपने साथ अपनी कुटिया पर लाये।


    Latest Religious News In Hindi

    जवाब देंहटाएं
  8. great , useful , nice badhiya Jankari.


    visit my site www.techindiaz.com

    जवाब देंहटाएं
  9. I must thank you for the efforts you have put in penning this site. I am hoping to check out the same high-grade content by you later on as well. In truth, your creative writing abilities has inspired me to get my own, personal blog now..

    SEO company in Chennai

    जवाब देंहटाएं
  10. Get professional Seo company in Pune with Affordable Price at HelpUonline and Rank better in search engine.

    जवाब देंहटाएं
  11. The site contains a very great blog. the information present in this site will be very useful for us. thank you for sharing the blog with us.
    Hadoop Training in Chennai

    जवाब देंहटाएं
  12. Hi I read your post very carefully and I think you are right that a well written post should be at least a 100 words and should capture the essence of your blog, book or article.

    SEO Company in Chennai

    जवाब देंहटाएं
  13. Nice And Very useful info,
    This article important and really good the for me is.Keep it up and thanks to the writer.Amazing write-up,Great article. Thanks!
    used to really good
    your info is quite helpful to forever. Historyhindi

    जवाब देंहटाएं
  14. This is such a very nice blog and very informative for all those people who can knew the YouTube and work on this platform. i appreciate you and share this info to all my friend's. Talented India News App

    जवाब देंहटाएं
  15. Thank you for the sensible critique. Me and my neighbor were just preparing to do some research about this. We got a grab a book from our area library but I think I learned more from this post. I’m very glad to see such magnificent information being shared freely out there :hotmail account


    जवाब देंहटाएं
  16. जानकारी प्रदान करने के लिए बहुत बहुत धन्यवाद ।

    Hindi Love Shayari

    जवाब देंहटाएं
  17. Hello Friends,

    I am daily visit your Website . I am a big fan you. Your all post is very lovely. https://rdskendra.online

    जवाब देंहटाएं
  18. Jasa Pembuatan Undangan Pernikahan Online Murah
    Onvition adalah sebuah platform yang membuat undangan pernikahan online terbaik di bali. Buat dan bagikan undangan pernikahanmu dengan berbagai pilihan desain dan tema menarik. Sangat Cepat, Mudah dan efisien untuk mengundang semua temanmu melalui onvition.com

    जवाब देंहटाएं
  19. आपने बहुत ही अच्छी जानकारी दी है । धन्यबाद
    अगर आप शायरी पढ़न चाहते है तो हमारे वेबसाइट पर जाये - shayarihd.com

    जवाब देंहटाएं
  20. Learned something new, thanks for sharing. Starting a business start with a logo.
    buy logo

    जवाब देंहटाएं
  21. I realized that being with nature gave me a sense of satisfaction, which no other activities could give.
    Career Growth. https://tumanishvili.com

    जवाब देंहटाएं
  22. you guys must have to visit this site:
    this is really a useful blog thanks for sharing it with us!
    we design the best websites & custom logos at a discount are you guys interested?
    Logo Designer Online

    जवाब देंहटाएं
  23. Nice post.The best photography service in the Narooma and surrounding area of the New south water south coast. We also cover the Penrith, blue mountains and the Western Sydney area. We provide wedding photography, family portraits, engagement photography, portraits, event photography, social media and influencer services.
    https://www.robertpalejsphotography.com/

    जवाब देंहटाएं
  24. You are really doing a marvelous job and keep the good work up and you have really inspired me.
    We are telecasting Hindi Reality Tv Show Bigg boss 15 free.Visit us to watch online its all episodes.
    bigg boss 15 voot bigg boss 15 voot online
    voot bigg boss 15 live

    जवाब देंहटाएं
  25. Are you looking for a nice coffee shop?
    Head Chef Cafe and Coffee Shop in Deeside, United Kingdom. The best service and customer friendly Cafe and Restaurant in Deeside. All day British breakfast. Custom meals and much more. https://g.page/r/CSTteLfFD3N9EA0

    जवाब देंहटाएं
  26. Thank you for sharing it with us.
    I am really happy to see this blog.
    It is very helpful for me.

    Nursing assignment help

    जवाब देंहटाएं
  27. Bigg Boss 15 Season Tv Show On Colors Tv that is Hosted By Sulman Khan in August 2021.This Show is Very Popular All Over the World.
    You Can Watch Bigg Boss 15 in Our Website in HD Quality.

    Bigg Boss 15 Today Watch Online
    Bigg Boss 15 Today Online
    Bigg Boss 15 Today Episode

    जवाब देंहटाएं
  28. Really good post! its very informative article Keep sharing more useful and informative articles. Thank you

    Ocean beach

    जवाब देंहटाएं