اضافة مشغل فيديوهات احترافي على مدونات بلوجر

السلام عليكم ورحمة الله وبركاتة الكثير من لايحب شكل مشغل الفيديوهات الخاص ببلوجر ويبحث عن اضافة تحسن شكل المشغل فاليوم نستعرض لكم اضافة جميلة لفيديوهات بلوجر

اضافة مشغل فيديوهات احترافي على مدونات بلوجر

طريق تركيب هذه الاضافة سهل وبسيطة جدا 

1. اولا البحث عن وسم </head> ونسخ هذا الكود فوقة 

<style>
/*<![CDATA[*/
/*videojs pagooo*/
@font-face{font-family:player;src:url(https://file.myfontastic.com/KHcWEPDMMSJ4TjY7FcyyaK/fonts/1480808305.eot);src:url(https://file.myfontastic.com/KHcWEPDMMSJ4TjY7FcyyaK/fonts/1480808305.eot?#iefix) format("embedded-opentype"),url(https://file.myfontastic.com/KHcWEPDMMSJ4TjY7FcyyaK/fonts/1480808305.woff) format("woff"),url(https://file.myfontastic.com/KHcWEPDMMSJ4TjY7FcyyaK/fonts/1480808305.ttf) format("truetype"),url(https://file.myfontastic.com/KHcWEPDMMSJ4TjY7FcyyaK/fonts/1480808305.svg#1480808305) format("svg");font-weight:400;font-style:normal}.video-js{max-width:100%;width:auto;max-height:100%;height:auto;position:relative}.video-js .vjs-tech{width:100%;height:100%;display:block}.video-js button,[class*=button]{border:0;background:0 0;outline:0;padding:0;margin:0;display:inline-block;line-height:0;cursor:pointer}.video-js button:before,[class*=button]:before{font-family:player!important;font-style:normal!important;font-weight:400!important;font-variant:normal!important;text-transform:none!important;speak:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:30px;vertical-align:middle;color:#fff;position:relative;top:2px}.video-js.vjs-controls-disabled .vjs-control-bar,.vjs-control-text,.vjs-has-started .vjs-big-play-button,.vjs-hidden,.vjs-remaining-time{display:none}.video-js .vjs-big-play-button:before,.video-js .vjs-play-control:before{content:"\64"}.video-js .vjs-play-control.vjs-playing:before{content:"\6e"}.video-js .vjs-vol-0:before,.video-js .vjs-vol-1:before{content:"\61"}.video-js .vjs-vol-2:before{content:"\62"}.video-js .vjs-vol-3:before{content:"\63"}.video-js .vjs-fullscreen-control:before,.video-js .vjs-icon-fullscreen-enter:before{content:"\6c"}.video-js .vjs-icon-fullscreen-exit:before,.video-js.vjs-fullscreen .vjs-fullscreen-control:before{content:"\6d"}.video-js .vjs-big-play-button{position:absolute;top:50%;left:50%;opacity:.8;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.video-js .vjs-big-play-button:before{font-size:10em}.video-js .vjs-big-play-button:hover{opacity:1}.video-js .vjs-control-bar{background:#252428;padding:1em;display:flex;justify-content:flex-start;align-items:center;position:relative}.video-js .vjs-control{padding:0 1em}.vjs-volume-menu-button .vjs-menu-content{display:block;width:5em;height:2px}.vjs-volume-menu-button{display:flex;justify-content:flex-start;align-items:center}.video-js .vjs-slider{background:rgba(255,255,255,.2);width:100%;height:100%}.video-js .vjs-volume-level,.vjs-play-progress.vjs-slider-bar{background:#00cfe8;height:100%;position:relative;cursor:pointer}.video-js .vjs-volume-level:before,.vjs-play-progress.vjs-slider-bar:before{content:"";position:absolute;right:-8px;width:12px;height:12px;background:#00cfe8;top:-5px;border-radius:50%;box-shadow:0 0 2px 2px rgba(0,207,232,.35);z-index:10;-webkit-transform:scale(.8);transform:scale(.8);-webkit-transition:transform .3s;transition:transform .3s}.video-js .vjs-volume-level:hover:before,.vjs-play-progress.vjs-slider-bar:hover:before{-webkit-transform:scale(1);transform:scale(1)}.vjs-volume-menu-button .vjs-menu{padding:.85em 0 .85em 1em;margin:auto;height:30px}.video-js .vjs-control.vjs-time-control,.vjs-time-control.vjs-time-divider{font-weight:700;color:#fff}.video-js .vjs-progress-control{position:absolute;top:0;width:100%;height:2px;left:0;padding:0}.video-js .vjs-load-progress{background:rgba(255,255,255,.75);height:100%;position:absolute}.video-js .vjs-play-progress.vjs-slider-bar:before{display:none}.vjs-has-started .vjs-play-progress.vjs-slider-bar:before{display:block}.video-js.vjs-user-active .vjs-play-progress.vjs-slider-bar:before{-webkit-transform:scale(1);transform:scale(1)}.video-js.vjs-user-inactive .vjs-play-progress.vjs-slider-bar:before{-webkit-transform:scale(0);transform:scale(0)}.video-js .vjs-fullscreen-control{margin-left:auto}.video-js.vjs-fullscreen{width:100%!important;height:100%!important}.video-js.fluid .vjs-control-bar,.video-js.vjs-fullscreen .vjs-control-bar{position:absolute;bottom:0;transition:opacity .3s;width:100%}.video-js.fluid.vjs-user-active .vjs-control-bar,.video-js.vjs-fullscreen.vjs-user-active .vjs-control-bar{opacity:.9}.video-js.fluid.vjs-user-inactive .vjs-control-bar,.video-js.vjs-fullscreen.vjs-user-inactive .vjs-control-bar{opacity:0}@-webkit-keyframes spinner{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spinner{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.vjs-loading-spinner{display:none;position:absolute;top:50%;left:50%;opacity:.85;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:60px;height:60px}.vjs-seeking .vjs-loading-spinner,.vjs-waiting .vjs-loading-spinner{display:block}.vjs-loading-spinner:after{content:'';border-radius:50%;animation:spinner .6s linear infinite;-webkit-animation:spinner .5s linear infinite;position:absolute;border-width:8px;border-style:solid;border-color:transparent #fff #fff transparent;width:100%;height:100%}@media only screen and (max-width:800px){.vjs-volume-menu-button .vjs-menu{display:none}.video-js .vjs-control{padding:0 .5em}.video-js .vjs-progress-control{padding:0}}@media only screen and (max-width:540px){.video-js .vjs-control-bar{padding:.5em 0}.video-js .vjs-big-play-button:before{font-size:5em}.video-js button:before,[class*=button]:before{font-size:25px}}
/*]]>*/
</style>



2. ابحث عن الوسم </body> وضع هذا الكود فوقة 



<script src="//vjs.zencdn.net/5.8.8/video.min.js"></script>



3. وفي الاخير اضغط حفظ وبعد ذلك ضع الكود التالى في كل تدوينة 

<video class='video-js' data-setup='{"controls": true}' id='vid1' poster='https://f.top4top.net/p_914zutdb1.jpg' preload='auto'>
<source src='https://www.youtube.com/watch?v=reT6HkCU4xU' type='video/mp4'></source>
</video>




4. عند تعين صورة الفيديو عليك تغير رابط  الصورة المنتهية ب jpg
5. وغير رابط الفيديو https://www.youtube.com/watch?v=reT6HkCU4xU

نتمنى ان يكون الموضوع قد نال اعجابكم