webdesign-android-devlopement-news-portal-designing-india-indore-bhopal-mp

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

Posted :| Posted By: Piush Trivedi | Labels: , 87 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 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

87 comments:


लेख पर अपनी प्रतिक्रिया अवश्य दे..
ध्यान दे !!:-
• हिंदी में प्रतिक्रिया देने के लिए यहाँ क्लिक करे
• टिप्पणी में 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. 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
  25. 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

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

    ReplyDelete
  27. Very interesting to read your blog. It make viewer to keep updated.

    Python Training in Chennai

    ReplyDelete
  28. Awesome friend this is what i was looking for Thanks for sharing this beautiful post. Please visit https://mkbloggers.blogspot.in/ for many more like this..

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

    ReplyDelete
    Replies
    1. Thanks for Commen & Visiting Hindi4Tech ... i M Now Visit Ur Blog.... :2thumbup

      Delete
  30. As you have now understood the usage of ‘Record and Playback’ tool, the following are the different posts using which you can explore the functioning of ‘Selenium IDE’
    selenium Training in chennai

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


    ReplyDelete
  32. Welcome to AZLyrics! It's a place where all searches end! We have a large, legal, every day growing universe of lyrics
    where stars of all genres and ages shine.

    ReplyDelete
  33. http://rogo2000.blogspot.com/2009/02/weve-moved.html

    ReplyDelete

  34. بسم الله الرحمن الرحيم نحن فى شركة الكمال نقوم بجميع عزل الخزانات المياه سواء كانت مياة الشرب او

    مياه الغسيل كما اننا يوجد لدين خدمة تسليك المجارى بافضل الطرق
    شركة عزل خزانات بالطائف
    شركة عزل خزانات بجازان
    شركة عزل خزانات بحائل
    والسلامة عليكم ورحمة الله وبركاته

    ReplyDelete
  35. orang2 yang memiliki pengetahuan tentang situs judi poker indonesia permainan ini dan ketajaman untuk memahami nuansa.
    asikqq
    http://dewaqqq.club/
    http://sumoqq.today/
    interqq
    pionpoker
    bandar ceme terpercaya
    betgratis
    paito warna terlengkap
    syair sgp

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

    Hindi Love Shayari

    ReplyDelete
  37. Adamclick.com - Online Shopping India - Buy mobiles, mobile parts, laptops, cameras, books, watches, apparel, shoes and e-Gift Cards, t-shirt, shirts, kids wear, kurti, legging are available with Free Shipping & Cash on Delivery Available. | Online Shopping site in India - Adamclick

    ReplyDelete
  38. Hello Friends,

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

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

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

    ReplyDelete
  41. Thank you so much for sharing this useful and informative information with us.
    Dr. Ratan Prakash Clinic offers Doctors Consultation, Full Body Checkup, Sugar Checkup & ECG Test. Dr. Ratan Prakash has more than 27+ years of experience.
    best general physician doctor in patna

    ReplyDelete
  42. Nice article Learn what is real SEO and how it is work click to know - Visit shayarihd.in!

    ReplyDelete
  43. Learned something new, thanks for sharing. Starting a business start with a logo.
    buy logo

    ReplyDelete
  44. Beneficial article for beginners. I am a beginner too, so these all tips help me a lot thanks for sharing. Also great with all of the valuable information you have. Keep up the excellent work you are doing well.
    thank you
    https://pioneermarketer.com/top-70-free-infographic-submission-sites-list-2021/

    ReplyDelete
  45. I realized that being with nature gave me a sense of satisfaction, which no other activities could give.
    Career Growth. https://tumanishvili.com

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

    ReplyDelete
  47. 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/

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

    ReplyDelete
  49. %100 Guaranteed World Wide Delivery-Safe and Secured Payment Methods
    [url]Buy Firearms online,Buy Glock pistols online,Buy Glock 17,Buy Glock 19 online,Buy Glock 22 online,Buy Riffle Firearms online


    Glock 17 for sale cheap online without License overnight delivery (glockgunstore.com)

    glock 30 for sale

    glock gun store

    beretta 92fs for sale

    sig sauer p938 for sale

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

    ReplyDelete
  51. Amazing post! Your given information is really informative and useful. Thanks for sharing your blog post. For subscription billing management software you can visit our website for such a Best and professional services.

    ReplyDelete
  52. Thank you for sharing it with us.
    I am really happy to see this blog.
    It is very helpful for me.

    Nursing assignment help

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

    ReplyDelete
  54. Bigg Boss 15 Serial is a Best Game Show and Interesting Colors Tv Series Which is Famous All Over the World.
    Bigg Boss 15 Show is Translated in Different Seven Languages Which is Shown in World.

    Bigg Boss 15 Today Watch
    Bigg Boss 15 Watch Live

    ReplyDelete
  55. Hello, and thank you for creating such a useful and well-written article. Thank you for making this content available to us.

    Digital Marketing In Telugu
    Digital Marketing Course In Telugu PDF

    ReplyDelete
  56. Great addition, thanks for sharing with us , If you want Wordpress Design Agency , WordPress agency and Hire wordpress Experts

    Please visit www.technosoftwares.com

    ReplyDelete
  57. Interesting article, thank you for sharing it with us.

    law dissertation Writers

    ReplyDelete
  58. Really good post! its very informative article Keep sharing more useful and informative articles. Thank you

    Ocean beach

    ReplyDelete
  59. Great Article Image Processing Projects Deep Learning Projects for Final Year JavaScript Training in Chennai JavaScript Training in Chennai The Angular Training covers a wide range of topics including Components, Angular Directives, Angular Services, Pipes, security fundamentals, Routing, and Angular programmability. The new Angular TRaining will lay the foundation you need to specialise in Single Page Application developer. Angular Training Project Centers in Chennai

    ReplyDelete
  60. Development Company in LucknowWeb24zon is a top web design agency and software development company with a large pool of software developers available for dedicated and fixed time/cost projects. Hire web developers from Web24zone who have proven expertise in trending web technologies like PHP, Laravel, Magento, ReactJS, front-end technologies like AngularJS and back-end technologies like Node.js to develop custom and responsive websites, web apps and eCommerce solutions.

    ReplyDelete