يعتبر يوتوب من اهم الوسائل التي يستعملها اغلب المدونين من اجل مشاركة المعرفة , لكن يواجه معضم المدونين مشاكل في تجاوب المدونة مع فيديوهات اليوتوب و بطئ تحميلها للمشاهذة مما يجعل اغلب الزوار الى تغيير وجهته الى اليوتوب او الى موقع اخر, رغم ان شرحك مفيد في الفيديوا دون استفادة الزائر لن تحصل على تقته بك .
اهمية هذه الاضافة :
ان كنت تعاني من نفس المشكل يرجى تتبع الخطوات التالية :
1.لوحة التحكم
2.إضغط على قالب
3. ثم تحريرhtml
4.إبحث بالضغط على CTRL+F عن الكود التالي : </head>
- ثم ضع قبله الكود التالي مباشرةً :
5.إبحث عن الكود التالي : </body>
- ثم ضع قبله الكود التالي مباشرةً :
6.إبحث عن الكود التالي : ]]</b:skin>
اهمية هذه الاضافة :
- سرعة تحميل
- سرع في الاستجابة
- صديقة للسيو
ان كنت تعاني من نفس المشكل يرجى تتبع الخطوات التالية :
1.لوحة التحكم
2.إضغط على قالب
3. ثم تحريرhtml
4.إبحث بالضغط على CTRL+F عن الكود التالي : </head>
- ثم ضع قبله الكود التالي مباشرةً :
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
5.إبحث عن الكود التالي : </body>
- ثم ضع قبله الكود التالي مباشرةً :
<script type='text/javascript'> //<![CDATA[ // Original Script by DTE :] // Optimized and Modified by Kang Ismet $(function() { $('a.youtube-link').each(function() { var yt_url = this.href, yt_id = yt_url.split('?v=')[1], yt_title = $(this).text(); $(this).replaceWith('<div class="youtube-box"><img class="youtube-img" src="http://img.youtube.com/vi/' + yt_id + '/0.jpg" alt="youtube" ></img><span class="gradient"></span><span class="youtube-title">' + yt_title + '</span><span class="youtube-play"></span></div>'); $('div.youtube-box').click(function() { $(this).replaceWith('<div class="youtube-frame"><div class="videoWrapper"><iframe src="http://www.youtube.com/embed/' + yt_id + '?autoplay=1" frameborder="0" allowfullscreen></iframe></div></div>'); }); }); }); //]]> </script>
6.إبحث عن الكود التالي : ]]</b:skin>
- ثم ضع قبله الكود التالي مباشرةً :
.youtube-box { text-align:center; background-color: black; width: 640px; max-width: 100%; margin: 0 auto; overflow: hidden; position: relative; } .youtube-frame { background-color: black; width: 640px; height: auto; max-width: 100%; text-align: center; margin: 0 auto; } .youtube-img { position: relative; height: 100%; width: 100%; margin-top: -7%; margin-bottom: -8.5%; transform: scale(1.1); } .youtube-box span { display:block; position:absolute; top:0px; right:0px; bottom:0px; left:0px; } .youtube-box .gradient { background: transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKBDeCwpLz8xDU6Zyeft3XavK2_P4ztvFFwOuSWeMJWTnMyySf1tAxrKYFbCQDTlsn39FzsShjybRM5VOgiUwcWweGl32fvGA6wo2Iyk7HiXOfkAHIWar5gY_fMe71PHiyboOqKvJ6JXc/s1600/gradient.png') repeat-x top left; } .youtube-box .youtube-title { background: transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIylwJ-1mqd1uoyXE_EEDANiX0mehSzNNSZZHnGosvUbFEwGWK0pWLnCr0MIPZqKgFIDqT380Hf0ppWL6tRQiZDxIgltlfs8-YELfLZLMTEwijsGpOzMlwhadcFUAYSr27_LsJxXyY2wU/s1600/t-title-bg.png') no-repeat 98% 50%; font:normal 19px Arial,Sans-Serif; color:white; text-shadow:0px 1px 2px black; bottom:auto; line-height:40px; height:40px; overflow:hidden; padding:0px 15px; text-align: left; } .youtube-box .youtube-play { cursor:pointer; width:74px; height:52px; top:50%; left:50%; margin:-26px 0px 0px -40px; background:transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi0-iZpZQfVd932Ckz-BuCWDzow_YdTi2WxdqEo4VpIWby9OpS0aQZef3xGLFC4G84k3_Kf-LCazse4gYoed6sNHqxazl761kx5cImtME-DR-mUioFXzSQzeqK4a-jjNZN8w6B-VjLVMo/s1600/yt-play-new.png') no-repeat top left; } .youtube-box .youtube-play:hover { background-position:bottom left; } .videoWrapper { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; } .videoWrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
نقوم بحفظ القالب
الان ناتي الى كود الفيديو الذي يوضع في الموضوع بالشكل التالي :
<a class="youtube-link" href="https://www.youtube.com/watch?v=Vqfy4ScRXFQ" rel="nofollow">عنوان الفيديو</a>
غير رابط الفيديو و كذلك عنوان الفيديو بالعنوان الذي تختاره للظهور كما في المثال اعلى