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

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

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

<style>


/*<![CDATA[*/


/*videojs sochiawy*/


@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

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