होम
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 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 टैग से बदला गया है वीडियो शुरू में मूल आकार में दिखाई देंगे और जैसे ही ब्राउज़र चौड़ाई कम होती है, तो यह उसके अनुसार स्वतः ही मोबाइल आकर में रूपांतरित हो जायेगा । <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>
:)
:-)
:))
=))
:(
:-(
:d
:-d
@-)
:p
:o
:>)
(o)
[-(
:-?
(p)
:-s
(m)
8-)
:-t
:-b
b-(
:-#
=p~
:-$
(b)
(f)
x-)
(k)
(h)
(c)
cheer
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
जवाब देंहटाएंThis is superb.. Awesome post. Great information. Thanks for sharing this post with us. seo services in India
जवाब देंहटाएंVery Nice Tips
जवाब देंहटाएं@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.... :>)
जवाब देंहटाएंHey, nice site you have here! Keep up the excellent work! website designing jalandhar
जवाब देंहटाएंइस टिप्पणी को लेखक द्वारा हटा दिया गया है.
जवाब देंहटाएंjordar tricks
जवाब देंहटाएंhttp://www.tookadi.com/
Wow such a great article this.
जवाब देंहटाएंThanks for sharing
seo tips and tricks
@Pooja, @Jaydeep, @Kanchana, @harinder Thanks To All For Comment & Visiting Hindi4Tech.... (o)
हटाएं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
फ़ोटोशॉप में पासपोर्ट आकार के फोटो बनाने के लिए यहां क्लिक करें
जवाब देंहटाएंI am a regular reader of your blog. the blog is very interesting
जवाब देंहटाएंand will be much useful for us.
ROI Services in Chennai
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
क्या आपको यह पता है कि रावण की मृत्यु के बाद सूपर्णखा सीता से मिलने जंगल आई थी, ये हुआ था..!
जवाब देंहटाएंभारतीय इतिहास की सबसे महत्वपूर्ण घटना राम और रावण से जुडी हुई है, इसके बारे में तो सभी लोग जानते ही होंगे। रामायण राम और रावण को मिला कर के ही बनी हुई है। सीता के अपहरण का बदला लेने के लिए राम ने रावण का वध कर दिया, लेकिन कोई और भी था जो सीता से मिलने के लिए बेसब्री से इंतज़ार कर रहा था। वह कोई और नहीं बल्कि रावण की बहन सूपर्णखा थी (Surpanakha Met Sita in forest after death of Rawan)।
राम और रावण के बीच युद्ध के पीछे इसी का हाथ था। सूपर्णखा का बदला अब तक पूरा नहीं हुआ था। जब सूपर्णखा ने सुना कि राम ने सीता हो बचा लिया है, तब उसने खुद ही बदला लेने की ठानी। सूपर्णखा ने याद किया कि कैसे राम और लक्षमण ने मिलकर उसकी बेइज्जती की थी और उसकी गरीमा छीनकर उसकी नाक काट दी थी। अपनी बहन की बेइज्जती का बदला लेने के लिए रावण ने सीता को धोखे बंदी बनाकर राम से बदला लेने का निर्णय लिया। राम ने अपनी पत्नी को बचाने के लिए रावण का वध कर दिया।
लंका में युद्ध जीतने के बाद राम अपनी पत्नी सीता और भाई लक्षमण के साथ अयोध्या लौट आये। अयोध्या आने के बाद यहाँ के निवासियों ने सीता की पवित्रता पर प्रश्नचिन्ह लगा दिया और राम को मजबूर कर दिया कि वह सीता को छोड़ दें। सीता एक आज्ञाकरी पत्नी की तरह अपने पेट में पल रहे बच्चे के साथ अयोध्या छोड़ दिया। सीता सीधे घने जंगल की तरफ बढ़ी, वह उन्हें वाल्मीकि मिले जो उन्हें अपने साथ अपनी कुटिया पर लाये।
Latest Religious News In Hindi
great , useful , nice badhiya Jankari.
जवाब देंहटाएंvisit my site www.techindiaz.com
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
Get professional Seo company in Pune with Affordable Price at HelpUonline and Rank better in search engine.
जवाब देंहटाएं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
Nice tips to make you-tube video mobile friendly. Latest Tech News Blog SEO Tips
जवाब देंहटाएंThanks for sharing incredible and fantastic readable blog to us.
जवाब देंहटाएंseo company in navi mumbai || seo services in navi mumbai || ppc services in navi mumbai || web designing company in navi mumbai || smm services in mumbai
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
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
Nice article to read
जवाब देंहटाएंOnline Marketing Services in bangalore
SEO Agencies Bangalore
affordable seo packages india
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
जवाब देंहटाएंThanks for Commen & Visiting Hindi4Tech ... i M Now Visit Ur Blog.... :2thumbup
हटाएं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
जवाब देंहटाएंhttp://rogo2000.blogspot.com/2009/02/weve-moved.html
जवाब देंहटाएंNews - Breaking News, Latest News & Top Video News
जवाब देंहटाएं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
जानकारी प्रदान करने के लिए बहुत बहुत धन्यवाद ।
जवाब देंहटाएंHindi Love Shayari
Read latest news latest news latest news latest news latest news latest news latest news This
जवाब देंहटाएंHello Friends,
जवाब देंहटाएंI am daily visit your Website . I am a big fan you. Your all post is very lovely. https://rdskendra.online
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
आपने बहुत ही अच्छी जानकारी दी है । धन्यबाद
जवाब देंहटाएंअगर आप शायरी पढ़न चाहते है तो हमारे वेबसाइट पर जाये - shayarihd.com
Nice article Learn what is real SEO and how it is work click to know - Visit shayarihd.in!
जवाब देंहटाएंLearned something new, thanks for sharing. Starting a business start with a logo.
जवाब देंहटाएंbuy logo
Amazing Blog..thanks for sharing...
जवाब देंहटाएंSchool Examination Management System in Pune
Thanks
जवाब देंहटाएंI realized that being with nature gave me a sense of satisfaction, which no other activities could give.
जवाब देंहटाएंCareer Growth. https://tumanishvili.com
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
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/
More impressive Blog!!! Its more useful for us...Thanks for sharing with us...
जवाब देंहटाएंGerman Classes in Chennai
German Course in Chennai
German language Classes in Chennai
French Classes in Chennai
French Course in Chennai
French language Classes in Chennai
Spanish Classes in Chennai
English Classes in Chennai
Spoken English Classes in Chennai
Hindi Classes in Chennai
https://letsspeak.co.in
Best digital marketing agency in chennai
Top digital marketing agency in chennai
Best SEO in chennai
best Web accessibility in chennai
More impressive Blog!!! Its more useful for us...Thanks for sharing with us...
German Classes in Chennai
German Course in Chennai
German language Classes in Chennai
French Classes in Chennai
French Course in Chennai
French language Classes in Chennai
Spanish Classes in Chennai
English Classes in Chennai
Spoken English Classes in Chennai
Hindi Classes in Chennai
https://letsspeak.co.in
Best digital marketing agency in chennai
Top digital marketing agency in chennai
Best SEO in chennai
best Web accessibility in chennai
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
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
Thank you for sharing it with us.
जवाब देंहटाएंI am really happy to see this blog.
It is very helpful for me.
Nursing assignment help
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
Great addition, thanks for sharing with us , If you want Wordpress Design Agency , WordPress agency and Hire wordpress Experts
जवाब देंहटाएंPlease visit www.technosoftwares.com
Thnks for sharing
जवाब देंहटाएंCommunity Panel & Insight Platform
Online Community Management Software
Online Market Research Project Sample Management Platform
best online sample management
Online Community Panel Platform
Online Community Panel software
evolution of research panel and panel management
Interesting article, thank you for sharing it with us.
जवाब देंहटाएंlaw dissertation Writers
Really good post! its very informative article Keep sharing more useful and informative articles. Thank you
जवाब देंहटाएंOcean beach