Плеер для VK Видео / RUTUBE / Kinescope
Компонент плеер для VK Видео / RUTUBE / Kinescope
Добавление виджета в редактор
Выберите версию и скопируйте код виджета ниже:
Виджет для версии страниц 3.7:
{"uid":"um3mx89w8tzwj01r8ci8","className":"WidgetMetaHtml","data":{"style":{"handlers":"style","vals":{"bgType":"clear","bgImage_Source":"library","bgImage":{"pack":"bg-tech","file":"//s.lpcdn.site/img/bg-tech/1.jpg","color":[0.55023297764639,1,0.5],"size":[1600,1046],"quality":8,"datamix":{"img":"3.7"}},"bgImage_Unsplash":{"file":null,"color":[0,0,0],"size":[200,60],"search":"","pack":"business","quality":8,"datamix":{"img":"3.7"}},"bgImage_Pixabay":{"file":null,"color":[0,0,0],"size":[200,60],"search":"","pack":"business","quality":8,"datamix":{"img":"3.7"}},"bgImage_Blur":0,"bgImage_Attach":false,"bgImage_Size":"cover","bgImage_Repeat":"repeat","bgImage_Valign":"center","bgImage_Halign":"center","bgVideo_Source":"youtube","bgVideo_Youtube":"http://www.youtube.com/watch?v=3oem-M2tQU4","bgVideo_YoutubeImageSource":"youtube","bgVideo_YoutubeImage":{"file":"http://img.youtube.com/vi/3oem-M2tQU4/maxresdefault.jpg","size":[1920,1080],"quality":8,"pack":"users","datamix":{"img":"3.7"}},"bgVideo_Mp4":"//s.lpcdn.site/bgvideo/island.mp4","bgVideo_Webm":"//s.lpcdn.site/bgvideo/island.webm","bgVideo_Ogv":"//s.lpcdn.site/bgvideo/island.ogv","bgVideo_DirectImage":{"file":"//s.lpcdn.site/bgvideo/island.jpg","size":[1280,720],"quality":8,"pack":"users","datamix":{"img":"3.7"}},"bgVideo_Sound":false,"bgColor":{"from":"global","global":{"id":0},"datamix":{"color":"3.7"},"router":"color"},"bgColor_Alpha":0.25,"bgColor_Bright":-0.34,"bgBright":-0.5,"bgGradientDirection":"to bottom","bgGradientColor1":{"from":"global","global":{"id":0},"datamix":{"color":"3.7"},"router":"color"},"bgGradientColor1_Alpha":0.8,"bgGradientColor2":{"from":"global","global":{"id":0},"datamix":{"color":"3.7"},"router":"color"},"bgGradientColor2_Alpha":0.2,"bgParticlesShapeParticle":"circle","bgParticlesColorParticle":{"from":"contrast","contrast":{"type":"frontcolor"},"parent":{"type":"frontcolor"},"datamix":{"color":"3.7"}},"bgParticlesOpacityParticle":1,"bgParticlesNumberParticle":80,"bgParticlesSizeParticle":5,"bgParticlesLink":true,"bgParticlesLinkDistance":150,"bgParticlesMoveState":true,"bgParticlesMoveSpeed":2,"bgParticlesMoveDirection":"none","bgParticlesMoveOutMode":"out","bgParticlesInteractHoverState":false,"bgParticlesInteractHoverType":"grab","bgParticlesInteractHoverGrabDistance":250,"bgParticlesInteractHoverGrabOpacity":0.8,"bgParticlesInteractHoverRepulseDistance":150,"bgParticlesInteractHoverBubbleDistance":150,"bgParticlesInteractHoverBubbleSize":10,"bgParticlesInteractClickState":false,"bgParticlesInteractClickType":"push","bgParticlesInteractClickCount":2,"padTop":5,"padBottom":5,"padLeft":5,"padRight":5,"borderWidth":3,"borderRadius":0,"borderStyle":"none","borderColor":{"from":"parent","parent":{"type":"frontcolor"},"datamix":{"color":"3.7"},"router":"color"},"shadow":false,"shadowInset":false,"shadowX":0,"shadowY":2,"shadowBlur":5,"shadowScale":0,"shadowColor":{"from":"self","data":[0,0,0],"datamix":{"color":"3.7"},"router":"color"},"shadowAlpha":0.5,"wow":false,"wowType":"fadeIn","wowDelay":0,"hover":false,"hoverType":"hvr-grow-mini","id":"","classes":"","hidexs":false,"hidesm":false,"hidemd":false,"hidelg":false,"usePadTopXs":false,"padTopXs":5,"usePadBottomXs":false,"padBottomXs":5,"usePadLeftXs":false,"padLeftXs":5,"usePadRightXs":false,"padRightXs":5,"usePadTopSm":false,"padTopSm":5,"usePadBottomSm":false,"padBottomSm":5,"usePadLeftSm":false,"padLeftSm":5,"usePadRightSm":false,"padRightSm":5,"usePadTopMd":false,"padTopMd":5,"usePadBottomMd":false,"padBottomMd":5,"usePadLeftMd":false,"padLeftMd":5,"usePadRightMd":false,"padRightMd":5}},"datamix":{"nodebg":"3.7","widgetpaddings":"3.7","widgetborders":"3.7","widgetshadow":"3.7","widgetfx":"3.7","widgetparameters":"3.7","widgetadaptive":"3.7","metahtml":"3.7"},"settings":{"handlers":"settings","vals":{"name":"Плеер для VK Видео / RUTUBE / Kinescope","html":"<% if (player == \"vk\" ) { %>\n <div id=\"{{vk_custom_height}}\" class=\"vk-wrap {{vk_mob_width}}\">\n <div class=\"vk-prev {{vk_prev}}\">\n <div class=\"prev_play_btn {{vk_prev_btn}}\">\n <div class=\"prev_play_btn_bg\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" fill=\"#ffffff\"\n class=\"bi bi-play-fill\" viewBox=\"0 0 16 16\">\n <path\n d=\"m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393\" />\n </svg>\n </div>\n </div>\n </div>\n <iframe style=\"position: absolute; width: 100%; height: 100%; top: 0; left: 0;\"\n allow=\"autoplay; encrypted-media; fullscreen; picture-in-picture; screen-wake-lock;\" frameborder=\"0\"\n allowfullscreen webkitAllowFullScreen mozallowfullscreen></iframe>\n </div>\n<% } else if (player == \"rutube\") { %>\n <div class=\"rutube_wrap {{rutube_mob_width}}\">\n <div class=\"rutube-prev {{rutube_prev}}\">\n <div class=\"prev_play_btn {{rutube_prev_btn}}\">\n <div class=\"prev_play_btn_bg\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" fill=\"#ffffff\"\n class=\"bi bi-play-fill\" viewBox=\"0 0 16 16\">\n <path\n d=\"m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393\" />\n </svg>\n </div>\n </div>\n </div>\n <iframe style=\"position: absolute; width: 100%; height: 100%; top: 0; left: 0;\"\n src=\"https://rutube.ru/play/embed/{{rutube_id}}/?r=wd\" frameborder=\"0\" allow=\"clipboard-write; autoplay; fullscreen\"\n allowFullScreen webkitAllowFullScreen mozallowfullscreen>\n </iframe>\n </div>\n<% } else if (player == \"kinescope\") { %>\n <div class=\"kinescope-player {{kinescope_mob_width}}\">\n <div class=\"only-for-editor\"><img src=\"http://f2.lpcdn.site/s/15ora9h061/09abb81a3bd0603d56beff274364d2de/67d0fd4fd8ed4e2822a7dbd65b91aab1.png\" style='width: 100%;'></div>\n <iframe src=\"{{kinescope_url}}?autoplay={{kinescope_autoplay}}&autopause={{kinescope_autopause}}&loop={{kinescope_loop}}&muted={{kinescope_muted}}&autopause={{kinescope_autopause}}&background={{kinescope_background}}&transparent={{kinescope_transparent}}\" allow=\"autoplay; fullscreen; picture-in-picture; encrypted-media; gyroscope; accelerometer; clipboard-write;\" frameborder=\"0\" allowfullscreen style=\"position: absolute; width: 100%; height: 100%; top: 0; left: 0;\"></iframe>\n </div>\n<% } else {} %>","css":"/* vk css */\n.vk-wrap {\n position: relative;\n width: {{vk_var1}}%;\n padding-top: {{vk_var1/1.77}}%;\n margin: 0 auto;\n }\n #true.vk-wrap {\n padding-top: unset;\n height: {{vk_var3}}px;\n }\n .screen-xs #true.vk-wrap {\n padding-top: unset;\n height: {{vk_var4}}px;\n }\n .screen-xs .vk-wrap.true {\n width: {{vk_var2}}%;\n padding-top: {{vk_var2/1.77}}%;\n }\n .vk-prev {\n background-image: url(https://f2.lpcdn.site/s/73o5jni061/09abb81a3bd0603d56beff274364d2de/e5cfa7854225ef3e25ad803a30537e03.jpg);\n background-size: 100% 100%;\n background-position: center;\n background-repeat: no-repeat;\n position: absolute;\n width: 100%; height: 100%; top: 0;\n }\n .vk-prev.true {\n background-image: url({{vk_img}});\n background-size: 100% 100%;\n background-position: center;\n background-repeat: no-repeat;\n cursor: pointer;\n z-index: 2000;\n }\n .vk-prev.false .prev_play_btn, .vk-prev.true .prev_play_btn.false {\n display: none;\n }\n .vk-prev.true .prev_play_btn.true {\n display: block;\n }\n .vk-prev.true .prev_play_btn.true {\n position: absolute;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n .vk-prev.true .prev_play_btn.true .prev_play_btn_bg {\n border-radius: 50%;\n background-color: rgba(0, 0, 0, .5);\n transition: background .2s, transform .2s;\n transition-timing-function: ease-out;\n padding: 21px;\n line-height: 0em;\n }\n .vk-prev.true:hover .prev_play_btn.true .prev_play_btn_bg {\n background-color: rgba(0, 0, 0, .6);\n transform: scale(1.15);\n }\n /* rutube css */\n .rutube_wrap {\n position: relative;\n width: {{rutube_var1}}%;\n padding-top: {{rutube_var1/1.77}}%;\n margin: 0 auto;\n }\n .screen-xs .rutube_wrap.true {\n width: {{rutube_var2}}%;\n padding-top: {{rutube_var2/1.77}}%;\n }\n .rutube-prev {\n background-image: url(https://f2.lpcdn.site/s/94l41km061/09abb81a3bd0603d56beff274364d2de/9c6eff6dc5816d9763bfbbcf4afa260f.jpg);\n background-size: 100% 100%;\n background-position: center;\n background-repeat: no-repeat;\n position: absolute;\n width: 100%; height: 100%; top: 0;\n }\n .rutube-prev.true {\n background-image: url({{rutube_img}});\n background-size: 100% 100%;\n background-position: center;\n background-repeat: no-repeat;\n cursor: pointer;\n z-index: 2000;\n }\n .rutube-prev.false .prev_play_btn, .rutube-prev.true .prev_play_btn.false {\n display: none;\n }\n .rutube-prev.true .prev_play_btn.true {\n display: block;\n }\n .rutube-prev.true .prev_play_btn.true {\n position: absolute;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n .rutube-prev.true .prev_play_btn.true .prev_play_btn_bg {\n border-radius: 50%;\n background-color: rgba(0, 0, 0, .5);\n transition: background .2s, transform .2s;\n transition-timing-function: ease-out;\n padding: 21px;\n line-height: 0em;\n }\n .rutube-prev.true:hover .prev_play_btn.true .prev_play_btn_bg {\n background-color: rgba(0, 0, 0, .6);\n transform: scale(1.15);\n }\n /** kinescope css **/\n .kinescope-player {\n position: relative;\n width: {{kinescope_var1}}%;\n padding-top: {{kinescope_var1/1.77}}%;\n margin: 0 auto;\n}\n .screen-xs .kinescope-player.true {\n width: {{kinescope_var2}}%;\n padding-top: {{kinescope_var2/1.77}}%;\n }\n.only-for-editor {\n position: absolute; width: 100%; height: 100%; top: 0; left: 0;\n overflow: hidden;\n}","meta_js":"if (params.player == \"vk\") {\n var URL = params.vk_url;\n var oid = URL.match(/(?<=video|clip).\\d+/g)[0];\n var id = URL.match(/\\d+$/g)[0];\n var player = $(el).find('iframe').get(0);\n \n if (params.vk_autoplay == true && params.vk_prev == false) {\n var new_url = \"https://vk.com/video_ext.php?oid=\" + oid + \"&id=\" + id + \"&autoplay=1\";\n player.src = new_url;\n } else if (params.vk_autoplay == false && params.vk_prev == true) {\n var new_url = \"https://vk.com/video_ext.php?oid=\" + oid + \"&id=\" + id;\n player.src = new_url;\n $(el).find('.vk-prev').on('click', function() {\n $(el).find('.vk-prev').css('opacity', '0');\n $(el).find('.vk-prev').css('z-index', 'unset');\n });\n } else if (params.vk_autoplay == true && params.vk_prev == true) {\n var new_url = \"https://vk.com/video_ext.php?oid=\" + oid + \"&id=\" + id + \"&autoplay=1\";\n $(el).find('.vk-prev').on('click', function() {\n player.src = new_url;\n $(el).find('.vk-prev').css('opacity', '0');\n $(el).find('.vk-prev').css('z-index', 'unset');\n });\n } else {\n var new_url = \"https://vk.com/video_ext.php?oid=\" + oid + \"&id=\" + id;\n player.src = new_url; \n }\n} else if (params.player == \"rutube\") { \n if (params.rutube_prev == true) {\n $(el).find('.rutube-prev').on('click', function() {\n $(el).find('.rutube-prev').css('opacity', '0');\n $(el).find('.rutube-prev').css('z-index', 'unset');\n });\n }\n}","meta_js_lazy":true,"meta_js_state":"return {\n initialState: {},\n eventListeners: {},\n reset: function () {},\n};","encapsulation":true,"embeds":[],"meta_cdn":[],"tabs":[{"id":"main","name":"Главные"},{"id":"second","name":"Дополнительные настройки"},{"id":"instruction","name":"Инструкция"}],"variables":[{"macros":"instruction","name":"","showCondition":"","useInJs":false,"tab":"instruction","type":"info","value":"","message":"Подробное описание в нашей Базе знаний <a href=\"https://support.platformalp.ru/article/20048\" target=\"_blank\">по ссылке</a>"},{"macros":"player","name":"Видео-сервис","showCondition":"","useInJs":true,"tab":"main","type":"btngroup","values":{"vk":"VK Видео","rutube":"RUTUBE","kinescope":"Kinescope"},"value":"kinescope"},{"macros":"vk_url","name":"Ссылка на видео","showCondition":"player==\"vk\"","useInJs":true,"tab":"main","type":"string","message":"Тут текст подсказки","value":"https://vk.com/video-22822305_456241864"},{"macros":"vk_var1","name":"Ширина видео в %","showCondition":"player==\"vk\"","useInJs":false,"tab":"main","type":"number","min":0,"max":100,"value":100},{"macros":"vk_mob_width","name":"Особый размер для телефонов","showCondition":"player==\"vk\"","useInJs":false,"tab":"main","type":"checkbox","value":false},{"macros":"vk_var2","name":"Ширина видео для телефонов в %","showCondition":"vk_mob_width && player==\"vk\"","useInJs":false,"tab":"main","type":"number","min":0,"max":100,"value":100},{"macros":"vk_autoplay","name":"Автостарт","showCondition":"player==\"vk\"","useInJs":true,"tab":"main","type":"checkbox","value":false},{"macros":"vk_prev","name":"Включить превью для видео","showCondition":"player==\"vk\"","useInJs":true,"tab":"second","type":"checkbox","value":true},{"macros":"vk_img","name":"Превью для видео","showCondition":"vk_prev && player==\"vk\"","useInJs":false,"tab":"second","type":"image","value":{"pack":"users","file":"//f2.lpcdn.site/09abb81a3bd0603d56beff274364d2de/9179784cb220b8f7ef5fd7da2acbf63c.jpg","size":[1920,1080],"quality":8,"datamix":{"img":"3.7"}}},{"macros":"vk_prev_btn","name":"Показать кнопку play","showCondition":"vk_prev && player==\"vk\"","useInJs":false,"tab":"second","type":"checkbox","value":false},{"macros":"vk_custom_height","name":"Произвольная высота плеера","showCondition":"player==\"vk\"","useInJs":false,"tab":"second","type":"checkbox","value":false},{"macros":"vk_var3","name":"Высота видео в px","showCondition":"vk_custom_height && player==\"vk\"","useInJs":false,"tab":"second","type":"number","min":0,"max":1080,"value":600},{"macros":"vk_var4","name":"Высота видео в px (для телефонов)","showCondition":"vk_custom_height && player==\"vk\"","useInJs":false,"tab":"second","type":"number","min":0,"max":1080,"value":400},{"macros":"rutube_id","name":"ID видео на RUTUBE (https://rutube.ru/video/ID_ВИДЕО/?r=wd)","showCondition":"player==\"rutube\"","useInJs":false,"tab":"main","type":"string","value":"3ddb622384123fb243ad26fc2e4c3f88"},{"macros":"rutube_var1","name":"Ширина видео в %","showCondition":"player==\"rutube\"","useInJs":false,"tab":"main","type":"number","min":0,"max":100,"value":70},{"macros":"rutube_mob_width","name":"Особый размер для телефонов","showCondition":"player==\"rutube\"","useInJs":false,"tab":"main","type":"checkbox","value":false},{"macros":"rutube_var2","name":"Ширина видео для телефонов в %","showCondition":"rutube_mob_width && player==\"rutube\"","useInJs":false,"tab":"main","type":"number","min":0,"max":100,"value":100},{"macros":"rutube_prev","name":"Включить превью для видео","showCondition":"player==\"rutube\"","useInJs":true,"tab":"second","type":"checkbox","value":true},{"macros":"rutube_img","name":"Превью для видео","showCondition":"rutube_prev && player==\"rutube\"","useInJs":false,"tab":"second","type":"image","value":{"pack":"users","file":"//f2.lpcdn.site/09abb81a3bd0603d56beff274364d2de/ca8f839f16decb9b5a9abf3683a68235.jpg","size":[1280,720],"quality":8,"datamix":{"img":"3.7"}}},{"macros":"rutube_prev_btn","name":"Показать кнопку play","showCondition":"rutube_prev && player==\"rutube\"","useInJs":false,"tab":"second","type":"checkbox","value":true},{"macros":"kinescope_url","name":"Ссылка на видео","showCondition":"player==\"kinescope\"","useInJs":false,"tab":"main","type":"string","value":"https://kinescope.io/200660126"},{"macros":"kinescope_var1","name":"Ширина видео в %","showCondition":"player==\"kinescope\"","useInJs":false,"tab":"main","type":"number","min":0,"max":100,"value":77},{"macros":"kinescope_autopause","name":"Ставить на паузу, если другой плеер на странице начал проигрывание","showCondition":"player==\"kinescope\"","useInJs":false,"tab":"second","type":"checkbox","value":false},{"macros":"kinescope_loop","name":"Зацикленное видео","showCondition":"player==\"kinescope\"","useInJs":false,"tab":"second","type":"checkbox","value":false},{"macros":"kinescope_muted","name":"Выключить звук","showCondition":"player==\"kinescope\"","useInJs":false,"tab":"second","type":"checkbox","value":false},{"macros":"kinescope_background","name":"Отключает все элементы управления, включает функции autoplay, muted, loop","showCondition":"player==\"kinescope\"","useInJs":false,"tab":"second","type":"checkbox","value":false},{"macros":"kinescope_transparent","name":"Прозрачный фон плеера","showCondition":"player==\"kinescope\"","useInJs":false,"tab":"second","type":"checkbox","value":false},{"macros":"kinescope_mob_width","name":"Особый размер для телефонов","showCondition":"player==\"kinescope\"","useInJs":false,"tab":"main","type":"checkbox","value":false},{"macros":"kinescope_var2","name":"Ширина видео для телефонов в %","showCondition":"kinescope_mob_width && player==\"kinescope\"","useInJs":false,"tab":"main","type":"number","min":0,"max":100,"value":100},{"macros":"kinescope_autoplay","name":"Автостарт","showCondition":"player==\"kinescope\"","useInJs":false,"tab":"main","type":"checkbox","value":false}]},"tabs":{"primary":"metahtml","metahtml__soft":"metahtml__soft_main","metahtml__hard":"metahtml__hard_css"},"toggles":{"metahtml":"soft"}},"state":{},"embeds":{},"templates":{"cont":{"sources":[],"datamix":{"cont":"3.7"},"tplname":"cont"},"text":{"html":"Редактируемый текст","tag":"p","lg":{"override":{"align":true,"font":true,"size":true,"intervals":true,"columns":true,"color":true},"align":"left","font":"font-text","size":16,"intervals":{"leading":1.4,"tracking":0},"columns":{"count":1,"gap":20},"color":{"from":"contrast","global":{"id":0,"transform":[["l","rel",0]]},"contrast":{"type":"frontcolor"},"data":[0,0,0],"inherit":false,"opacity":1,"datamix":{"color":"3.7"}}},"md":{"override":{"align":false,"font":false,"size":false,"intervals":false,"columns":false,"color":false},"align":"left","font":"font-text","size":16,"intervals":{"leading":1.4,"tracking":0},"columns":{"count":1,"gap":20},"color":{"from":"contrast","global":{"id":0,"transform":[["l","rel",0]]},"contrast":{"type":"frontcolor"},"data":[0,0,0],"inherit":false,"opacity":1,"datamix":{"color":"3.7"}}},"sm":{"override":{"align":false,"font":false,"size":false,"intervals":false,"columns":false,"color":false},"align":"left","font":"font-text","size":16,"intervals":{"leading":1.4,"tracking":0},"columns":{"count":1,"gap":20},"color":{"from":"contrast","global":{"id":0,"transform":[["l","rel",0]]},"contrast":{"type":"frontcolor"},"data":[0,0,0],"inherit":false,"opacity":1,"datamix":{"color":"3.7"}}},"xs":{"override":{"align":false,"font":false,"size":false,"intervals":false,"columns":false,"color":false},"align":"left","font":"font-text","size":16,"intervals":{"leading":1.4,"tracking":0},"columns":{"count":1,"gap":20},"color":{"from":"contrast","global":{"id":0,"transform":[["l","rel",0]]},"contrast":{"type":"frontcolor"},"data":[0,0,0],"inherit":false,"opacity":1,"datamix":{"color":"3.7"}}},"datamix":{"html":"3.7"},"tplname":"text"},"icon":{"handlers":"rawsvgicon","vals":{"src":{"file":"//s.lpcdn.site/img/icons-simple-thin/49--black.png","pack":"icons-simple-thin","size":[256,256],"svg":"<style type=\"text/css\"><![CDATA[ .st0{fill:none;stroke:#231F20;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;} ]]></style><polygon class=\"st0\" points=\"30.001,2.421 38.965,20.576 59,23.49 44.499,37.622 47.922,57.579 30.001,48.156 12.076,57.579 15.5,37.622 1,23.49 21.041,20.576 \"/>","quality":8,"datamix":{"img":"3.7"}}},"datamix":{"rawsvgicon":"3.7"},"tplname":"icon"},"image":{"handlers":"rawimage","vals":{"src":{"file":"//f1.lpcdn.site/63d3a6c9689d0a310bdb33ba48a9f341/194594eafe8a83db5eb472d202544c73.png","size":[477,500],"quality":8,"pack":"users","datamix":{"img":"3.7"}}},"datamix":{"rawimage":"3.7"},"tplname":"image"}}},"multilandings":[],"variants":[],"redactor":"3.7"}Виджет для версии страниц 3.3:
{"className":"WidgetMetaHtml","data":{"style":{"handlers":"style","vals":{"bgType":"clear","bgImage":{"pack":"bg-tech","file":"//s.lpcdn.site/img/bg-tech/1.jpg","color":[0.55023297764639,1,0.5],"size":[1600,1046],"datamix":{"img":"3.3"}},"bgImage_Blur":0,"bgImage_Attach":false,"bgImage_Size":"cover","bgImage_Repeat":"repeat","bgImage_Valign":"center","bgImage_Halign":"center","bgVideo_Source":"youtube","bgVideo_Youtube":"http://www.youtube.com/watch?v=3oem-M2tQU4","bgVideo_YoutubeImageSource":"youtube","bgVideo_YoutubeImage":{"file":"http://img.youtube.com/vi/3oem-M2tQU4/maxresdefault.jpg","size":[1920,1080],"pack":"users","datamix":{"img":"3.3"}},"bgVideo_Mp4":"//s.lpcdn.site/bgvideo/island.mp4","bgVideo_Webm":"//s.lpcdn.site/bgvideo/island.webm","bgVideo_Ogv":"//s.lpcdn.site/bgvideo/island.ogv","bgVideo_DirectImage":{"file":"//s.lpcdn.site/bgvideo/island.jpg","size":[1280,720],"pack":"users","datamix":{"img":"3.3"}},"bgColor":{"from":"global","global":{"id":0},"datamix":{"color":"3.3"},"router":"color"},"bgColor_Alpha":0.25,"bgColor_Bright":-0.34,"bgBright":-0.5,"bgGradientDirection":"to bottom","bgGradientColor1":{"from":"global","global":{"id":0},"datamix":{"color":"3.3"},"router":"color"},"bgGradientColor1_Alpha":0.8,"bgGradientColor2":{"from":"global","global":{"id":0},"datamix":{"color":"3.3"},"router":"color"},"bgGradientColor2_Alpha":0.2,"bgParticlesShapeParticle":"circle","bgParticlesColorParticle":{"from":"contrast","contrast":{"type":"frontcolor"},"parent":{"type":"frontcolor"},"datamix":{"color":"3.3"}},"bgParticlesOpacityParticle":1,"bgParticlesNumberParticle":80,"bgParticlesSizeParticle":5,"bgParticlesLink":true,"bgParticlesLinkDistance":150,"bgParticlesMoveState":true,"bgParticlesMoveSpeed":2,"bgParticlesMoveDirection":"none","bgParticlesMoveOutMode":"out","bgParticlesInteractHoverState":false,"bgParticlesInteractHoverType":"grab","bgParticlesInteractHoverGrabDistance":250,"bgParticlesInteractHoverGrabOpacity":0.8,"bgParticlesInteractHoverRepulseDistance":150,"bgParticlesInteractHoverBubbleDistance":150,"bgParticlesInteractHoverBubbleSize":10,"bgParticlesInteractClickState":false,"bgParticlesInteractClickType":"push","bgParticlesInteractClickCount":2,"padTop":5,"padBottom":5,"padLeft":5,"padRight":5,"borderWidth":3,"borderRadius":0,"borderStyle":"none","borderColor":{"from":"parent","parent":{"type":"frontcolor"},"datamix":{"color":"3.3"},"router":"color"},"shadow":false,"shadowInset":false,"shadowX":0,"shadowY":11,"shadowBlur":5,"shadowScale":-7,"shadowColor":{"from":"self","data":[0,0,0],"datamix":{"color":"3.3"},"router":"color"},"shadowAlpha":0.35,"wow":false,"wowType":"bounceIn","wowDelay":0,"hover":false,"hoverType":"hvr-grow-mini","id":"","classes":"","hidexs":false,"hidesm":false,"hidemd":false,"hidelg":false,"usePadTopXs":false,"padTopXs":5,"usePadBottomXs":false,"padBottomXs":5,"usePadLeftXs":false,"padLeftXs":5,"usePadRightXs":false,"padRightXs":5,"usePadTopSm":false,"padTopSm":5,"usePadBottomSm":false,"padBottomSm":5,"usePadLeftSm":false,"padLeftSm":5,"usePadRightSm":false,"padRightSm":5,"usePadTopMd":false,"padTopMd":5,"usePadBottomMd":false,"padBottomMd":5,"usePadLeftMd":false,"padLeftMd":5,"usePadRightMd":false,"padRightMd":5},"tabs":{"primary":"bg","bg":"bg_video_","bg_particles":"particles_view","bg_place__soft":"bg_place__soft_main","bg_place__hard":"bg_place__hard_main","shadow__soft":"shadow__soft_main","shadow__hard":"shadow__hard_main","paddings__soft":"paddings__soft_main","paddings__hard":"paddings__hard_main","widgetfx":"widgetfx_wow"},"toggles":{"bg_place":"soft","shadow":"soft","paddings":"soft"}},"datamix":{"nodebg":"3.3","widgetpaddings":"3.3","widgetborders":"3.3","widgetshadow":"3.3","widgetfx":"3.3","widgetparameters":"3.3","widgetadaptive":"3.3","metahtml":"3.3"},"settings":{"handlers":"settings","vals":{"name":"Плеер для VK Видео / RUTUBE / Kinescope","html":"<% if (player == \"vk\" ) { %>\n <div id=\"{{vk_custom_height}}\" class=\"vk-wrap {{vk_mob_width}}\">\n <div class=\"vk-prev {{vk_prev}}\">\n <div class=\"prev_play_btn {{vk_prev_btn}}\">\n <div class=\"prev_play_btn_bg\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" fill=\"#ffffff\"\n class=\"bi bi-play-fill\" viewBox=\"0 0 16 16\">\n <path\n d=\"m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393\" />\n </svg>\n </div>\n </div>\n </div>\n <iframe style=\"position: absolute; width: 100%; height: 100%; top: 0; left: 0;\"\n allow=\"autoplay; encrypted-media; fullscreen; picture-in-picture; screen-wake-lock;\" frameborder=\"0\"\n allowfullscreen webkitAllowFullScreen mozallowfullscreen></iframe>\n </div>\n<% } else if (player == \"rutube\") { %>\n <div class=\"rutube_wrap {{rutube_mob_width}}\">\n <div class=\"rutube-prev {{rutube_prev}}\">\n <div class=\"prev_play_btn {{rutube_prev_btn}}\">\n <div class=\"prev_play_btn_bg\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" fill=\"#ffffff\"\n class=\"bi bi-play-fill\" viewBox=\"0 0 16 16\">\n <path\n d=\"m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393\" />\n </svg>\n </div>\n </div>\n </div>\n <iframe style=\"position: absolute; width: 100%; height: 100%; top: 0; left: 0;\"\n src=\"https://rutube.ru/play/embed/{{rutube_id}}/?r=wd\" frameborder=\"0\" allow=\"clipboard-write; autoplay; fullscreen\"\n allowFullScreen webkitAllowFullScreen mozallowfullscreen>\n </iframe>\n </div>\n<% } else if (player == \"kinescope\") { %>\n <div class=\"kinescope-player {{kinescope_mob_width}}\">\n <div class=\"only-for-editor\"><img src=\"http://f2.lpcdn.site/s/15ora9h061/09abb81a3bd0603d56beff274364d2de/67d0fd4fd8ed4e2822a7dbd65b91aab1.png\" style='width: 100%;'></div>\n <iframe src=\"{{kinescope_url}}?autoplay={{kinescope_autoplay}}&autopause={{kinescope_autopause}}&loop={{kinescope_loop}}&muted={{kinescope_muted}}&autopause={{kinescope_autopause}}&background={{kinescope_background}}&transparent={{kinescope_transparent}}\" allow=\"autoplay; fullscreen; picture-in-picture; encrypted-media; gyroscope; accelerometer; clipboard-write;\" frameborder=\"0\" allowfullscreen style=\"position: absolute; width: 100%; height: 100%; top: 0; left: 0;\"></iframe>\n </div>\n<% } else {} %>","css":"/* vk css */\n.vk-wrap {\n position: relative;\n width: {{vk_var1}}%;\n padding-top: {{vk_var1/1.77}}%;\n margin: 0 auto;\n }\n #true.vk-wrap {\n padding-top: unset;\n height: {{vk_var3}}px;\n }\n .screen-xs #true.vk-wrap {\n padding-top: unset;\n height: {{vk_var4}}px;\n }\n .screen-xs .vk-wrap.true {\n width: {{vk_var2}}%;\n padding-top: {{vk_var2/1.77}}%;\n }\n .vk-prev {\n background-image: url(https://f2.lpcdn.site/s/73o5jni061/09abb81a3bd0603d56beff274364d2de/e5cfa7854225ef3e25ad803a30537e03.jpg);\n background-size: 100% 100%;\n background-position: center;\n background-repeat: no-repeat;\n position: absolute;\n width: 100%; height: 100%; top: 0;\n }\n .vk-prev.true {\n background-image: url({{vk_img}});\n background-size: 100% 100%;\n background-position: center;\n background-repeat: no-repeat;\n cursor: pointer;\n z-index: 2000;\n }\n .vk-prev.false .prev_play_btn, .vk-prev.true .prev_play_btn.false {\n display: none;\n }\n .vk-prev.true .prev_play_btn.true {\n display: block;\n }\n .vk-prev.true .prev_play_btn.true {\n position: absolute;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n .vk-prev.true .prev_play_btn.true .prev_play_btn_bg {\n border-radius: 50%;\n background-color: rgba(0, 0, 0, .5);\n transition: background .2s, transform .2s;\n transition-timing-function: ease-out;\n padding: 21px;\n line-height: 0em;\n }\n .vk-prev.true:hover .prev_play_btn.true .prev_play_btn_bg {\n background-color: rgba(0, 0, 0, .6);\n transform: scale(1.15);\n }\n /* rutube css */\n .rutube_wrap {\n position: relative;\n width: {{rutube_var1}}%;\n padding-top: {{rutube_var1/1.77}}%;\n margin: 0 auto;\n }\n .screen-xs .rutube_wrap.true {\n width: {{rutube_var2}}%;\n padding-top: {{rutube_var2/1.77}}%;\n }\n .rutube-prev {\n background-image: url(https://f2.lpcdn.site/s/94l41km061/09abb81a3bd0603d56beff274364d2de/9c6eff6dc5816d9763bfbbcf4afa260f.jpg);\n background-size: 100% 100%;\n background-position: center;\n background-repeat: no-repeat;\n position: absolute;\n width: 100%; height: 100%; top: 0;\n }\n .rutube-prev.true {\n background-image: url({{rutube_img}});\n background-size: 100% 100%;\n background-position: center;\n background-repeat: no-repeat;\n cursor: pointer;\n z-index: 2000;\n }\n .rutube-prev.false .prev_play_btn, .rutube-prev.true .prev_play_btn.false {\n display: none;\n }\n .rutube-prev.true .prev_play_btn.true {\n display: block;\n }\n .rutube-prev.true .prev_play_btn.true {\n position: absolute;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n .rutube-prev.true .prev_play_btn.true .prev_play_btn_bg {\n border-radius: 50%;\n background-color: rgba(0, 0, 0, .5);\n transition: background .2s, transform .2s;\n transition-timing-function: ease-out;\n padding: 21px;\n line-height: 0em;\n }\n .rutube-prev.true:hover .prev_play_btn.true .prev_play_btn_bg {\n background-color: rgba(0, 0, 0, .6);\n transform: scale(1.15);\n }\n /** kinescope css **/\n .kinescope-player {\n position: relative;\n width: {{kinescope_var1}}%;\n padding-top: {{kinescope_var1/1.77}}%;\n margin: 0 auto;\n}\n .screen-xs .kinescope-player.true {\n width: {{kinescope_var2}}%;\n padding-top: {{kinescope_var2/1.77}}%;\n }\n.only-for-editor {\n position: absolute; width: 100%; height: 100%; top: 0; left: 0;\n overflow: hidden;\n}","meta_js":"if (params.player == \"vk\") {\n var URL = params.vk_url;\n var oid = URL.match(/(?<=video|clip).\\d+/g)[0];\n var id = URL.match(/\\d+$/g)[0];\n var player = $(el).find('iframe').get(0);\n \n if (params.vk_autoplay == true && params.vk_prev == false) {\n var new_url = \"https://vk.com/video_ext.php?oid=\" + oid + \"&id=\" + id + \"&autoplay=1\";\n player.src = new_url;\n } else if (params.vk_autoplay == false && params.vk_prev == true) {\n var new_url = \"https://vk.com/video_ext.php?oid=\" + oid + \"&id=\" + id;\n player.src = new_url;\n $(el).find('.vk-prev').on('click', function() {\n $(el).find('.vk-prev').css('opacity', '0');\n $(el).find('.vk-prev').css('z-index', 'unset');\n });\n } else if (params.vk_autoplay == true && params.vk_prev == true) {\n var new_url = \"https://vk.com/video_ext.php?oid=\" + oid + \"&id=\" + id + \"&autoplay=1\";\n $(el).find('.vk-prev').on('click', function() {\n player.src = new_url;\n $(el).find('.vk-prev').css('opacity', '0');\n $(el).find('.vk-prev').css('z-index', 'unset');\n });\n } else {\n var new_url = \"https://vk.com/video_ext.php?oid=\" + oid + \"&id=\" + id;\n player.src = new_url; \n }\n} else if (params.player == \"rutube\") { \n if (params.rutube_prev == true) {\n $(el).find('.rutube-prev').on('click', function() {\n $(el).find('.rutube-prev').css('opacity', '0');\n $(el).find('.rutube-prev').css('z-index', 'unset');\n });\n }\n}","meta_js_lazy":true,"meta_js_state":"return {\n initialState: {},\n eventListeners: {},\n reset: function () {},\n};","encapsulation":true,"components":[],"meta_cdn":[],"tabs":[{"id":"main","name":"Главные"},{"id":"second","name":"Дополнительные настройки"},{"id":"instruction","name":"Инструкция"}],"variables":[{"macros":"instruction","name":"","showCondition":"","useInJs":false,"tab":"instruction","type":"info","value":"","message":"Подробное описание в нашей Базе знаний <a href=\"https://support.platformalp.ru/article/20048\" target=\"_blank\">по ссылке</a>"},{"macros":"player","name":"Видео-сервис","showCondition":"","useInJs":true,"tab":"main","type":"btngroup","values":{"vk":"VK Видео","rutube":"RUTUBE","kinescope":"Kinescope"},"value":"vk"},{"macros":"vk_url","name":"Ссылка на видео","showCondition":"player==\"vk\"","useInJs":true,"tab":"main","type":"string","message":"Тут текст подсказки","value":"https://vk.com/video-22822305_456241864"},{"macros":"vk_var1","name":"Ширина видео в %","showCondition":"player==\"vk\"","useInJs":false,"tab":"main","type":"number","min":0,"max":100,"value":70},{"macros":"vk_mob_width","name":"Особый размер для телефонов","showCondition":"player==\"vk\"","useInJs":false,"tab":"main","type":"checkbox","value":false},{"macros":"vk_var2","name":"Ширина видео для телефонов в %","showCondition":"vk_mob_width && player==\"vk\"","useInJs":false,"tab":"main","type":"number","min":0,"max":100,"value":100},{"macros":"vk_autoplay","name":"Автостарт","showCondition":"player==\"vk\"","useInJs":true,"tab":"main","type":"checkbox","value":false},{"macros":"vk_prev","name":"Включить превью для видео","showCondition":"player==\"vk\"","useInJs":true,"tab":"second","type":"checkbox","value":false},{"macros":"vk_img","name":"Превью для видео","showCondition":"vk_prev && player==\"vk\"","useInJs":false,"tab":"second","type":"image","value":{"pack":"users","file":"//f2.lpcdn.site/09abb81a3bd0603d56beff274364d2de/9179784cb220b8f7ef5fd7da2acbf63c.jpg","size":[1920,1080],"datamix":{"img":"3.3"}}},{"macros":"vk_prev_btn","name":"Показать кнопку play","showCondition":"vk_prev && player==\"vk\"","useInJs":false,"tab":"second","type":"checkbox","value":true},{"macros":"vk_custom_height","name":"Произвольная высота плеера","showCondition":"player==\"vk\"","useInJs":false,"tab":"second","type":"checkbox","value":false},{"macros":"vk_var3","name":"Высота видео в px","showCondition":"vk_custom_height && player==\"vk\"","useInJs":false,"tab":"second","type":"number","min":0,"max":1080,"value":600},{"macros":"vk_var4","name":"Высота видео в px (для телефонов)","showCondition":"vk_custom_height && player==\"vk\"","useInJs":false,"tab":"second","type":"number","min":0,"max":1080,"value":400},{"macros":"rutube_id","name":"ID видео на RUTUBE (https://rutube.ru/video/ID_ВИДЕО/?r=wd)","showCondition":"player==\"rutube\"","useInJs":false,"tab":"main","type":"string","message":"Тут текст подсказки","value":"3ddb622384123fb243ad26fc2e4c3f88"},{"macros":"rutube_var1","name":"Ширина видео в %","showCondition":"player==\"rutube\"","useInJs":false,"tab":"main","type":"number","min":0,"max":100,"value":70},{"macros":"rutube_mob_width","name":"Особый размер для телефонов","showCondition":"player==\"rutube\"","useInJs":false,"tab":"main","type":"checkbox","value":false},{"macros":"rutube_var2","name":"Ширина видео для телефонов в %","showCondition":"rutube_mob_width && player==\"rutube\"","useInJs":false,"tab":"main","type":"number","min":0,"max":100,"value":100},{"macros":"rutube_prev","name":"Включить превью для видео","showCondition":"player==\"rutube\"","useInJs":true,"tab":"second","type":"checkbox","value":false},{"macros":"rutube_img","name":"Превью для видео","showCondition":"rutube_prev && player==\"rutube\"","useInJs":false,"tab":"second","type":"image","value":{"pack":"users","file":"//f2.lpcdn.site/09abb81a3bd0603d56beff274364d2de/e740d948cb9fda78809392815e517051.jpg","size":[1280,720],"datamix":{"img":"3.3"}}},{"macros":"rutube_prev_btn","name":"Показать кнопку play","showCondition":"rutube_prev && player==\"rutube\"","useInJs":false,"tab":"second","type":"checkbox","value":true},{"macros":"kinescope_url","name":"Ссылка на видео","showCondition":"player==\"kinescope\"","useInJs":false,"tab":"main","type":"string","message":"Тут текст подсказки","value":"https://kinescope.io/200660126"},{"macros":"kinescope_var1","name":"Ширина видео в %","showCondition":"player==\"kinescope\"","useInJs":false,"tab":"main","type":"number","min":0,"max":100,"value":70},{"macros":"kinescope_autopause","name":"Ставить на паузу, если другой плеер на странице начал проигрывание","showCondition":"player==\"kinescope\"","useInJs":false,"tab":"second","type":"checkbox","value":false},{"macros":"kinescope_loop","name":"Зацикленное видео","showCondition":"player==\"kinescope\"","useInJs":false,"tab":"second","type":"checkbox","value":false},{"macros":"kinescope_muted","name":"Выключить звук","showCondition":"player==\"kinescope\"","useInJs":false,"tab":"second","type":"checkbox","value":false},{"macros":"kinescope_background","name":"Отключает все элементы управления, включает функции autoplay, muted, loop","showCondition":"player==\"kinescope\"","useInJs":false,"tab":"second","type":"checkbox","value":false},{"macros":"kinescope_transparent","name":"Прозрачный фон плеера","showCondition":"player==\"kinescope\"","useInJs":false,"tab":"second","type":"checkbox","value":false},{"macros":"kinescope_mob_width","name":"Особый размер для телефонов","showCondition":"player==\"kinescope\"","useInJs":false,"tab":"main","type":"checkbox","value":false},{"macros":"kinescope_var2","name":"Ширина видео для телефонов в %","showCondition":"kinescope_mob_width && player==\"kinescope\"","useInJs":false,"tab":"main","type":"number","min":0,"max":100,"value":100},{"macros":"kinescope_autoplay","name":"Автостарт","showCondition":"player==\"kinescope\"","useInJs":false,"tab":"main","type":"checkbox","value":false}]},"tabs":{"primary":"metahtml","metahtml__soft":"metahtml__soft_main","metahtml__hard":"metahtml__hard_variables"},"toggles":{"metahtml":"soft"}},"state":{},"components":{},"templates":{"cont":{"sources":[],"datamix":{"cont":"3.3"},"tplname":"cont"},"text":{"html":"<p>Редактируемый текст</p>","datamix":{"html":"3.3"},"tplname":"text"},"icon":{"handlers":"rawsvgicon","vals":{"src":{"file":"//s.lpcdn.site/img/icons-simple-thin/49--black.png","pack":"icons-simple-thin","size":[256,256],"svg":"<style type=\"text/css\"><![CDATA[ .st0{fill:none;stroke:#231F20;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;} ]]></style><polygon class=\"st0\" points=\"30.001,2.421 38.965,20.576 59,23.49 44.499,37.622 47.922,57.579 30.001,48.156 12.076,57.579 15.5,37.622 1,23.49 21.041,20.576 \"/>","datamix":{"img":"3.3"}}},"datamix":{"rawsvgicon":"3.3"},"tplname":"icon"},"image":{"handlers":"rawimage","vals":{"src":{"file":"//f1.lpcdn.site/63d3a6c9689d0a310bdb33ba48a9f341/194594eafe8a83db5eb472d202544c73.png","size":[477,500],"pack":"users","datamix":{"img":"3.3"}}},"datamix":{"rawimage":"3.3"},"tplname":"image"}}},"multilandings":[],"locked":false,"locks":0,"variants":[],"redactor":"3.3.2"}В редакторе страницы добавьте любой виджет, например, “Текст”, затем на панели добавленного виджета нажмите кнопку “Дублировать” → “Импорт” и в открывшемся окне вставьте скопированный код виджета, нажмите “Сохранить”.
На данный момент в виджете доступен выбор видео-сервисов:
VK Видео
RUTUBE
Kinescope
VK Видео
С помощью этого виджета вы сможете добавить на свой сайт видео, загруженное на платформу ВКонтакте, например рекламный ролик, портфолио или интервью с клиентами.
Видео будет встроено на сайт в виде полноценного плеера ВКонтакте. Ролик можно будет посмотреть, поставить отметку «Нравится» и поделиться им с друзьями.
Чтобы встроить видео на сайт, нужно установить виджет ВК видео, скопировать и вставить прямую ссылку на видео.
Добавление видео в виждет
Загрузите видео на платформу ВКонтакте или найдите нужное.
Откройте видео в плеере, нажмите на кнопку “Экспортировать” и скопируйте прямую ссылку на видео.
Вставьте ссылку на видео в виджет “Видео из ВК“. Сделайте нужные вам настройки в виджете, опубликуйте страницу и проверьте работу видео на опубликованной странице.
Видео RUTUBE
Добавление видео в виждет
Загрузите видео на платформу RUTUBE или найдите нужное.
Откройте видео в плеере, нажмите на кнопку “Поделиться” и скопируйте ссылку на видео.
Вам нужно вставить в настройках плеера id видео из скопированной ссылки.
Например в ссылке: https://rutube.ru/video/3ddb622384123fb243ad26fc2e4c3f88/?r=wd
id выделен жирным.
Видео Kinescope
Профессиональный видеохостинг для ваших видео. Все, что нужно для работы с видео: хранение, защита от скачивания, удобное встраивание и трансляции. Идеально для авторов и бизнеса.
Добавление видео в виждет
Зарегистрируйтесь или войдите в аккаунт в сервисе https://kinescope.io/
Загрузите свое видео в проект https://app.kinescope.io/video или воспользуйтесь имеющийся у вас ссылкой на видео.
Получить ссылку на загруженное видео можно так:
В виджете Плеер в настройках вставьте вашу полученную ссылку с шага 3. Сделайте нужные настройки и опубликуйте страницу.
Вы можете ознакомиться с подробной документацией сервиса Kinescope по адресу: https://docs.kinescope.io/player/latest/
Бесплатный тариф включает в себя загрузку видео до 100 минут.