Ads By Google info
webdesign-android-devlopement-news-portal-designing-india-indore-bhopal-mp

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

Posted : | Posted By: Piush Trivedi | Labels: , 31 Comments
Posted by: Piush
Pin It


   हिंदी ४ टेक के पिछले लेख में मैंने बताया था की कैसे अपने ब्लॉग या वेबसाइट को मोबाइल फ्रेंडली स्क्रीन रेसोलुशन में बदला जाये , ब्लॉग टेम्पलेट 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 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="http://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

31 comments:

  1. Nice article Learn what is real SEO and how it is work click to know http://www.24hoursseo.com/2015/11/what-is-seo.html

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

    ReplyDelete
  3. Thanks for taking the time to discuss that, I really feel strongly about it and love learning more on that topic. If achievable, as you gain competence, would you mind updating your blog with more information? It is highly helpful for me. php training in jalandhar

    ReplyDelete
    Replies
    1. @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.... :>)

      Delete
  4. Hey, nice site you have here! Keep up the excellent work! website designing jalandhar

    ReplyDelete
  5. This comment has been removed by the author.

    ReplyDelete
  6. jordar tricks
    http://www.tookadi.com/

    ReplyDelete
  7. Wow such a great article this.
    Thanks for sharing
    seo tips and tricks

    ReplyDelete
    Replies
    1. @Pooja, @Jaydeep, @Kanchana, @harinder Thanks To All For Comment & Visiting Hindi4Tech.... (o)

      Delete
  8. Truely a very good article on how to handle the future technology. After reading your post,thanks for taking the time to discuss this, I feel happy about and I love 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.
    Android training in chennai

    ReplyDelete
  9. 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

    ReplyDelete

  10. the blog is very interesting and will be much useful for us. thank you for sharing the blog with us. please keep on updating.
    Informatica Training in Chennai

    ReplyDelete
  11. the blog is very interesting and will be much useful for us. thank you for sharing the blog with us. please keep on updating.
    Informatica Training in Chennai

    ReplyDelete
  12. This blog provides useful information about new techniques and concepts.very impressive lines are given which is very attractive.
    SEO training in chennai

    ReplyDelete
  13. the blog is very interesting and will be much useful for us. thank you for sharing the blog with us. please keep on updating.
    Informatica Training in Chennai

    ReplyDelete
  14. I am a regular reader of your blog. the blog is very interesting
    and will be much useful for us.
    ROI Services in Chennai

    ReplyDelete
  15. 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

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

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


    Latest Religious News In Hindi

    ReplyDelete
  17. Very nice post here and thanks for it .I always like and such a super contents of these post.Excellent and very cool idea and great content of different kinds of the valuable information's.

    digital marketing company in chennai
    seo company in chennai

    ReplyDelete
  18. great , useful , nice badhiya Jankari.


    visit my site www.techindiaz.com

    ReplyDelete
  19. 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

    ReplyDelete
  20. Get professional Seo company in Pune with Affordable Price at HelpUonline and Rank better in search engine.

    ReplyDelete
  21. It's interesting that many of the bloggers to helped clarify a few things for me as well as giving.Most of ideas can be nice content.The people to give them a good shake to get your point and across the command .
    SEO Company in Chennai

    ReplyDelete
  22. 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

    ReplyDelete
  23. Nice tips to make you-tube video mobile friendly. Latest Tech News Blog SEO Tips

    ReplyDelete
  24. An important building block of SEO is to develop your website which can be easily understandable for both Online Visitors (most important) and search engine robots. In the current digital age, seo is important for your online success means to generate leads.

    SEO Services in IndiaSEO Company in India SEO Company in India SEO Services in India

    SEO Company in India SEO Services in India

    ReplyDelete

Post A Comment

:) :-) :)) =)) :( :-( :(( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ :-$ (b) (f) x-) (k) (h) (c) cheer
और दिखाए


लेख पर अपनी प्रतिक्रिया अवश्य दे..
ध्यान दे !!:-
• हिंदी में प्रतिक्रिया देने के लिए यहाँ क्लिक करे
• टिप्पणी में Html Code डाला जा सकता है
• टिप्पणी में Image डालने के लिए [im]Your Image Link [/im] कोड का उपयोग करे
• टिप्पणी में Youtube Video डालने के लिए [youtube]Youtube Video Link [/youtube] कोड का उपयोग करे
• टिप्पणी में Smiley's का उपयोग करने के लिए ऊपर बताये गए कोड को डाले
• टिप्पणी प्रकाशन में कोई परेशानी है तो यहां क्लिक करें..
Regards, Hindi4Tech


Top Commen tor Ask A Question Follow