{"id":15282,"date":"2025-09-24T16:31:30","date_gmt":"2025-09-24T14:31:30","guid":{"rendered":"https:\/\/marabelia.com\/producto\/parallax-video-fijo-para-wpbakery-marabelia\/"},"modified":"2025-09-27T12:30:35","modified_gmt":"2025-09-27T10:30:35","slug":"parallax-video-fijo-para-wpbakery-marabelia","status":"publish","type":"product","link":"https:\/\/marabelia.com\/en\/producto\/parallax-video-fijo-para-wpbakery-marabelia\/","title":{"rendered":"Parallax Fixed Video for WPBakery"},"content":{"rendered":"<div class=\"wpb-content-wrapper\">[vc_row css=&#8221;.vc_custom_1758742494111{padding-right: 3% !important;padding-left: 3% !important;}&#8221;][vc_column][vc_column_text css=&#8221;&#8221;]\n<h2 data-start=\"891\" data-end=\"1490\"><span style=\"font-size: 130%;\">Parallax Fixed Video for WPBakery\u00a0<\/span><\/h2>\n[\/vc_column_text][vc_empty_space height=&#8221;32px&#8221;][vc_column_text css=&#8221;&#8221;]\n<h3><span style=\"font-size: 140%;\">1. Installation and Setup<\/span><\/h3>\n<p data-start=\"2171\" data-end=\"2201\"><strong data-start=\"2171\" data-end=\"2191\">Install and activate<\/strong> the ZIP.<\/p>\n<p data-start=\"2205\" data-end=\"2243\">Go to <strong data-start=\"2210\" data-end=\"2240\">Settings \u2192 Fixed Video Background<\/strong>:<\/p>\n<p data-start=\"2583\" data-end=\"2629\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-15235 alignnone\" src=\"https:\/\/marabelia.com\/wp-content\/uploads\/2025\/09\/PARALLAX-VIDEO-FIJO-VC-1.png\" alt=\"\" width=\"980\" height=\"706\" srcset=\"https:\/\/marabelia.com\/wp-content\/uploads\/2025\/09\/PARALLAX-VIDEO-FIJO-VC-1.png 980w, https:\/\/marabelia.com\/wp-content\/uploads\/2025\/09\/PARALLAX-VIDEO-FIJO-VC-1-300x216.png 300w, https:\/\/marabelia.com\/wp-content\/uploads\/2025\/09\/PARALLAX-VIDEO-FIJO-VC-1-768x553.png 768w, https:\/\/marabelia.com\/wp-content\/uploads\/2025\/09\/PARALLAX-VIDEO-FIJO-VC-1-800x576.png 800w\" sizes=\"auto, (max-width: 980px) 100vw, 980px\" \/><img loading=\"lazy\" decoding=\"async\" class=\" wp-image-15237 alignnone\" src=\"https:\/\/marabelia.com\/wp-content\/uploads\/2025\/09\/PARALLAX-VIDEO-FIJO-VC-2.png\" alt=\"\" width=\"979\" height=\"669\" srcset=\"https:\/\/marabelia.com\/wp-content\/uploads\/2025\/09\/PARALLAX-VIDEO-FIJO-VC-2.png 919w, https:\/\/marabelia.com\/wp-content\/uploads\/2025\/09\/PARALLAX-VIDEO-FIJO-VC-2-300x205.png 300w, https:\/\/marabelia.com\/wp-content\/uploads\/2025\/09\/PARALLAX-VIDEO-FIJO-VC-2-768x525.png 768w, https:\/\/marabelia.com\/wp-content\/uploads\/2025\/09\/PARALLAX-VIDEO-FIJO-VC-2-800x547.png 800w\" sizes=\"auto, (max-width: 979px) 100vw, 979px\" \/><\/p>\n<p data-start=\"2583\" data-end=\"2629\"><img loading=\"lazy\" decoding=\"async\" class=\" wp-image-15239 alignnone\" src=\"https:\/\/marabelia.com\/wp-content\/uploads\/2025\/09\/PARALLAX-VIDEO-FIJO-VC-3.png\" alt=\"\" width=\"975\" height=\"335\" srcset=\"https:\/\/marabelia.com\/wp-content\/uploads\/2025\/09\/PARALLAX-VIDEO-FIJO-VC-3.png 1077w, https:\/\/marabelia.com\/wp-content\/uploads\/2025\/09\/PARALLAX-VIDEO-FIJO-VC-3-300x103.png 300w, https:\/\/marabelia.com\/wp-content\/uploads\/2025\/09\/PARALLAX-VIDEO-FIJO-VC-3-1024x352.png 1024w, https:\/\/marabelia.com\/wp-content\/uploads\/2025\/09\/PARALLAX-VIDEO-FIJO-VC-3-768x264.png 768w, https:\/\/marabelia.com\/wp-content\/uploads\/2025\/09\/PARALLAX-VIDEO-FIJO-VC-3-800x275.png 800w\" sizes=\"auto, (max-width: 975px) 100vw, 975px\" \/><\/p>\n[\/vc_column_text][vc_empty_space height=&#8221;32px&#8221;][vc_column_text css=&#8221;.vc_custom_1758795925551{padding-top: 2% !important;padding-bottom: 5% !important;}&#8221;]\n<h3 data-start=\"177\" data-end=\"222\"><strong><span style=\"font-size: 22.176px;\">Options on the Settings Page:<\/span><\/strong><\/h3>\n<p>&nbsp;<\/p>\n<ul data-start=\"224\" data-end=\"2465\">\n<li data-start=\"224\" data-end=\"411\">\n<p data-start=\"226\" data-end=\"364\"><span style=\"font-size: 85%;\"><strong data-start=\"226\" data-end=\"264\">Video URL (MP4 on your server)<\/strong> \u2014 <strong data-start=\"267\" data-end=\"282\">Required<\/strong> if you want video. Paste the full path to the <code data-start=\"326\" data-end=\"332\">.mp4<\/code> (preferably H.264, 720p, no audio). <\/span><span style=\"font-size: 85%; color: #333333;\">Tip: the lighter the file, the better the experience.<\/span><\/p>\n<\/li>\n<li data-start=\"413\" data-end=\"592\">\n<p data-start=\"415\" data-end=\"592\"><span style=\"font-size: 85%;\"><strong data-start=\"415\" data-end=\"446\">Poster \/ back-up image<\/strong> \u2014 <strong data-start=\"449\" data-end=\"469\">Highly recommended<\/strong>. It displays while the video loads and when you <strong data-start=\"518\" data-end=\"538\">hide it on mobile<\/strong>. Also use it if you prefer <strong data-start=\"567\" data-end=\"582\">image only<\/strong> as the background.<\/span><\/p>\n<\/li>\n<li data-start=\"594\" data-end=\"954\">\n<p data-start=\"596\" data-end=\"749\"><span style=\"font-size: 85%;\"><strong data-start=\"596\" data-end=\"655\">Mode: Automatic if the page contains the row class<\/strong> \u2014 <strong data-start=\"658\" data-end=\"673\">Recommended<\/strong>. The plugin only activates on pages that have a row with <code data-start=\"735\" data-end=\"746\">fvf-block<\/code>.<\/span><\/p>\n<\/li>\n<\/ul>\n<ul data-start=\"224\" data-end=\"2465\">\n<li style=\"list-style-type: none;\"><\/li>\n<li data-start=\"956\" data-end=\"1187\">\n<p data-start=\"958\" data-end=\"1089\"><span style=\"font-size: 85%;\"><strong data-start=\"958\" data-end=\"988\">Make only the row transparent<\/strong> \u2014 <strong data-start=\"991\" data-end=\"1003\">Enable it<\/strong>. Makes transparent <strong data-start=\"1023\" data-end=\"1031\">only<\/strong> the row marked with <code data-start=\"1052\" data-end=\"1063\">fvf-block<\/code> (not the entire template).<\/span><\/p>\n<\/li>\n<li data-start=\"1189\" data-end=\"1393\">\n<p data-start=\"1191\" data-end=\"1393\"><span style=\"font-size: 85%;\"><strong data-start=\"1191\" data-end=\"1222\">Cancel WPBakery parallax<\/strong> \u2014 <strong data-start=\"1225\" data-end=\"1237\">Enable it<\/strong> to prevent micro-movements from WPBakery inner backgrounds. Ensures the <strong data-start=\"1317\" data-end=\"1348\">video stays completely fixed<\/strong> while only the content scrolls.<\/span><\/p>\n<\/li>\n<li data-start=\"1395\" data-end=\"1585\">\n<p data-start=\"1397\" data-end=\"1585\"><span style=\"font-size: 85%;\"><strong data-start=\"1397\" data-end=\"1436\">Hide video on mobile (use poster)<\/strong> \u2014 <strong data-start=\"1439\" data-end=\"1459\">Highly recommended<\/strong> for performance and due to autoplay policies on mobile devices. On mobile, users will see the static <strong data-start=\"1540\" data-end=\"1550\">poster<\/strong>; on desktop, the video.<\/span><\/p>\n<\/li>\n<li data-start=\"1587\" data-end=\"1828\">\n<p data-start=\"1589\" data-end=\"1828\"><span style=\"font-size: 85%;\"><strong data-start=\"1589\" data-end=\"1625\">Default panel color (white)<\/strong> \u2014 <strong data-start=\"1628\" data-end=\"1675\">Affects all columns with <code data-start=\"1662\" data-end=\"1673\">fvf-panel<\/code><\/strong>. This is the translucent background that ensures readability over the video. Adjust the <strong data-start=\"1751\" data-end=\"1763\">opacity<\/strong> (the last number in <code data-start=\"1785\" data-end=\"1791\">rgba<\/code>) to balance contrast and breathing room.<\/span><\/p>\n<\/li>\n<li data-start=\"1830\" data-end=\"2018\">\n<p data-start=\"1832\" data-end=\"2018\"><span style=\"font-size: 85%;\"><strong data-start=\"1832\" data-end=\"1874\">\u201cBlack\u201d color (for <code data-start=\"1854\" data-end=\"1871\">fvf-panel-black<\/code>)<\/strong> \u2014 Quick variant for <strong data-start=\"1898\" data-end=\"1916\">high contrast<\/strong>. Applies when you assign <code data-start=\"1958\" data-end=\"1985\">fvf-panel fvf-panel-black<\/code> to a column. Useful for strong titles\/CTAs.<\/span><\/p>\n<\/li>\n<li data-start=\"2020\" data-end=\"2178\">\n<p data-start=\"2022\" data-end=\"2178\"><span style=\"font-size: 85%;\"><strong data-start=\"2022\" data-end=\"2048\">Inset (visual padding)<\/strong> \u2014 <strong data-start=\"2051\" data-end=\"2070\">Inner spacing<\/strong> of the panel. Increase\/decrease this value (e.g. <code data-start=\"2108\" data-end=\"2114\">12px<\/code>, <code data-start=\"2116\" data-end=\"2122\">16px<\/code>, <code data-start=\"2124\" data-end=\"2130\">24px<\/code>) to give breathing room to the panel content.<\/span><\/p>\n<\/li>\n<li data-start=\"2180\" data-end=\"2289\">\n<p data-start=\"2182\" data-end=\"2289\"><span style=\"font-size: 85%;\"><strong data-start=\"2182\" data-end=\"2192\">Radius<\/strong> \u2014 <strong data-start=\"2195\" data-end=\"2217\">Rounded corners<\/strong> of the panel. Aesthetic and readable; if you want it fully square, set <code data-start=\"2285\" data-end=\"2288\">0<\/code>.<\/span><\/p>\n<\/li>\n<li data-start=\"2291\" data-end=\"2465\">\n<p data-start=\"2293\" data-end=\"2465\"><span style=\"font-size: 85%;\"><strong data-start=\"2293\" data-end=\"2316\">Shadow (box-shadow)<\/strong> \u2014 <strong data-start=\"2319\" data-end=\"2334\">Depth<\/strong> of the panel. Useful to separate it from the video when the video has a lot of detail. Adjust final opacity so it doesn\u2019t look like a \u201csticker\u201d.<\/span><\/p>\n<\/li>\n<\/ul>\n[\/vc_column_text][vc_empty_space height=&#8221;32px&#8221;][vc_row_inner css=&#8221;.vc_custom_1758722414802{background-color: #E0E0E0 !important;}&#8221;][vc_column_inner][vc_column_text css=&#8221;.vc_custom_1758796068542{padding-top: 5% !important;padding-right: 5% !important;padding-bottom: 5% !important;padding-left: 5% !important;}&#8221;]\n<h3 style=\"text-align: center;\"><span style=\"font-size: 120%;\">Page Flow Reminder<\/span><\/h3>\n<p>&nbsp;<\/p>\n<p style=\"text-align: center;\" data-start=\"2515\" data-end=\"2591\"><span style=\"font-size: 120%;\"><strong data-start=\"2515\" data-end=\"2531\">Window row<\/strong>: add <strong data-start=\"2539\" data-end=\"2554\"><code data-start=\"2541\" data-end=\"2552\">fvf-block<\/code><\/strong> (opens the \u201cwindow\u201d to the fixed background).<\/span><\/p>\n<p style=\"text-align: center;\" data-start=\"2594\" data-end=\"2669\"><span style=\"font-size: 120%;\"><strong data-start=\"2594\" data-end=\"2615\">Column with panel<\/strong>: add <strong data-start=\"2623\" data-end=\"2638\"><code data-start=\"2625\" data-end=\"2636\">fvf-panel<\/code><\/strong> (applies the <strong data-start=\"2648\" data-end=\"2665\">Default color<\/strong>).<\/span><\/p>\n<p style=\"text-align: center;\" data-start=\"2672\" data-end=\"2754\"><span style=\"font-size: 120%;\"><strong data-start=\"2672\" data-end=\"2690\">Black variant<\/strong>: also add <strong data-start=\"2705\" data-end=\"2726\"><code data-start=\"2707\" data-end=\"2724\">fvf-panel-black<\/code><\/strong> if you need more contrast.<\/span><\/p>\n[\/vc_column_text][\/vc_column_inner][\/vc_row_inner][vc_empty_space height=&#8221;32px&#8221;][vc_column_text css=&#8221;&#8221;]\n<h2 data-start=\"2583\" data-end=\"2629\"><span style=\"font-size: 140%;\">2. Page Setup<\/span><\/h2>\n<p>&nbsp;<\/p>\n<h3 data-start=\"245\" data-end=\"305\">A) Quick option: <strong data-start=\"266\" data-end=\"305\">download and install the demo page<\/strong><\/h3>\n<ol data-start=\"306\" data-end=\"1179\">\n<li data-start=\"306\" data-end=\"415\">\n<p data-start=\"309\" data-end=\"415\"><strong data-start=\"309\" data-end=\"321\">Download<\/strong> the file from our <a href=\"https:\/\/marabelia.site\/parallax\/\" target=\"_blank\" rel=\"noopener\">page demo<\/a>:<br data-start=\"341\" data-end=\"344\" \/>\u2192 <a href=\"https:\/\/marabelia.com\/wp-content\/uploads\/2025\/09\/PAGINA-PARALLAX.txt\" target=\"_blank\" rel=\"noopener\"><span class=\"\" data-state=\"closed\"><strong data-start=\"350\" data-end=\"373\">PAGINA PARALLAX.txt<\/strong><\/span><\/a><\/p>\n<\/li>\n<li data-start=\"417\" data-end=\"647\">\n<p data-start=\"420\" data-end=\"486\"><strong data-start=\"420\" data-end=\"445\">Create a new page<\/strong> in WordPress (Pages \u2192 Add New).<\/p>\n<ul data-start=\"490\" data-end=\"647\">\n<li data-start=\"490\" data-end=\"572\">\n<p data-start=\"492\" data-end=\"572\">If you use the Classic Editor: <strong data-start=\"519\" data-end=\"555\">switch to the \u201cText\/HTML\u201d tab<\/strong> (not \u201cVisual\u201d).<\/p>\n<\/li>\n<li data-start=\"576\" data-end=\"647\">\n<p data-start=\"578\" data-end=\"647\">If you use Gutenberg: insert a <strong data-start=\"615\" data-end=\"632\">\u201cCustom HTML\u201d<\/strong> block and work there.<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li data-start=\"649\" data-end=\"701\">\n<p data-start=\"652\" data-end=\"701\"><strong data-start=\"652\" data-end=\"660\">Paste<\/strong> inside <strong data-start=\"668\" data-end=\"676\">all<\/strong> the content from the <code data-start=\"694\" data-end=\"700\">.txt<\/code>.<\/p>\n<\/li>\n<li data-start=\"703\" data-end=\"741\">\n<p data-start=\"706\" data-end=\"741\"><strong data-start=\"706\" data-end=\"716\">Save<\/strong> (Draft or Update).<\/p>\n<\/li>\n<li data-start=\"743\" data-end=\"986\">\n<p data-start=\"746\" data-end=\"876\"><strong data-start=\"746\" data-end=\"779\">Open WPBakery in Backend mode<\/strong> (button <strong data-start=\"787\" data-end=\"807\">\u201cBackend Editor\u201d<\/strong>) to see the blocks already set up (rows, columns, texts, etc.).<\/p>\n<ul data-start=\"880\" data-end=\"986\">\n<li data-start=\"880\" data-end=\"986\">\n<p data-start=\"882\" data-end=\"986\">In the demo, the classes are already in place: the <strong data-start=\"926\" data-end=\"934\">row<\/strong> with <code data-start=\"939\" data-end=\"950\">fvf-block<\/code> and the <strong data-start=\"957\" data-end=\"969\">columns<\/strong> with <code data-start=\"974\" data-end=\"985\">fvf-panel<\/code>.<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li data-start=\"988\" data-end=\"1179\">\n<p data-start=\"991\" data-end=\"1076\"><strong data-start=\"991\" data-end=\"1006\">Customize<\/strong>: change texts, duplicate columns or sections, adjust titles and CTAs.<\/p>\n<ul data-start=\"1080\" data-end=\"1179\">\n<li data-start=\"1080\" data-end=\"1179\">\n<p data-start=\"1082\" data-end=\"1179\">The <strong data-start=\"1085\" data-end=\"1106\">video and poster<\/strong> are defined by the plugin in <strong data-start=\"1131\" data-end=\"1161\">Settings \u2192 Fixed Video Background<\/strong>, not within the page.<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<p data-start=\"1183\" data-end=\"1300\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-15247\" src=\"https:\/\/marabelia.com\/wp-content\/uploads\/2025\/09\/Captura-de-pantalla-2025-09-24-a-las-15.16.15.png\" alt=\"\" width=\"1389\" height=\"751\" srcset=\"https:\/\/marabelia.com\/wp-content\/uploads\/2025\/09\/Captura-de-pantalla-2025-09-24-a-las-15.16.15.png 1389w, https:\/\/marabelia.com\/wp-content\/uploads\/2025\/09\/Captura-de-pantalla-2025-09-24-a-las-15.16.15-300x162.png 300w, https:\/\/marabelia.com\/wp-content\/uploads\/2025\/09\/Captura-de-pantalla-2025-09-24-a-las-15.16.15-1024x554.png 1024w, https:\/\/marabelia.com\/wp-content\/uploads\/2025\/09\/Captura-de-pantalla-2025-09-24-a-las-15.16.15-768x415.png 768w, https:\/\/marabelia.com\/wp-content\/uploads\/2025\/09\/Captura-de-pantalla-2025-09-24-a-las-15.16.15-800x433.png 800w\" sizes=\"auto, (max-width: 1389px) 100vw, 1389px\" \/><\/p>\n<h2 data-start=\"1307\" data-end=\"1370\"><\/h2>\n[\/vc_column_text][vc_column_text css=&#8221;&#8221;]\n<h3 data-start=\"1307\" data-end=\"1370\">B) Manual option: <strong data-start=\"1328\" data-end=\"1359\">configure rows and columns<\/strong> (WPBakery)<\/h3>\n<p>&nbsp;<\/p>\n<p data-start=\"1472\" data-end=\"1502\"><span style=\"font-size: 115%;\"><strong>1. \u201cVideo window\u201d row<\/strong><\/span><\/p>\n<ul data-start=\"1503\" data-end=\"1954\">\n<li data-start=\"1503\" data-end=\"1653\">\n<p data-start=\"1505\" data-end=\"1653\">Open a first row and in <strong data-start=\"1510\" data-end=\"1538\">Row Settings<\/strong> look for <span style=\"background-color: #ffff00;\"><b>Extra CSS Class<\/b><\/span> and <span style=\"background-color: #ffff00;\"><strong>type the tag: <code data-start=\"1572\" data-end=\"1583\">fvf-block<\/code><\/strong><\/span><\/p>\n<\/li>\n<li data-start=\"1503\" data-end=\"1653\">\n<p data-start=\"1505\" data-end=\"1653\">This action <strong data-start=\"1596\" data-end=\"1615\">will open the video window<\/strong> <strong>for the whole page<\/strong>, so that <strong>all new rows will become transparent<\/strong> by default <strong>and will display the video background.<\/strong><\/p>\n<\/li>\n<li data-start=\"1991\" data-end=\"2171\">\n<p data-start=\"1993\" data-end=\"2171\">For the plugin settings to activate, all rows on the page must include the extra CSS <span style=\"background-color: #ffff00;\"><strong><code data-start=\"1572\" data-end=\"1583\">fvf-block<\/code>.<\/strong><\/span> (It is recommended to duplicate rows)<\/p>\n<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-15241 alignnone\" src=\"https:\/\/marabelia.com\/wp-content\/uploads\/2025\/09\/PARALLAX-VIDEO-FIJO-VC-4.png\" alt=\"\" width=\"659\" height=\"256\" srcset=\"https:\/\/marabelia.com\/wp-content\/uploads\/2025\/09\/PARALLAX-VIDEO-FIJO-VC-4.png 659w, https:\/\/marabelia.com\/wp-content\/uploads\/2025\/09\/PARALLAX-VIDEO-FIJO-VC-4-300x117.png 300w\" sizes=\"auto, (max-width: 659px) 100vw, 659px\" \/><\/p>\n<p data-start=\"1956\" data-end=\"1990\"><strong><span style=\"font-size: 115%;\">2. Columns with color panel<\/span><\/strong><\/p>\n<ul data-start=\"1991\" data-end=\"2497\">\n<li data-start=\"1991\" data-end=\"2171\"><span style=\"color: #555555; font-size: 14.4px;\">Now, so that columns have a background color, open <\/span><strong style=\"color: #555555; font-size: 14.4px;\" data-start=\"1998\" data-end=\"2023\">Column Settings<\/strong><span style=\"color: #555555; font-size: 14.4px;\"> and in <\/span><strong style=\"color: #555555; font-size: 14.4px;\" data-start=\"2029\" data-end=\"2049\">Extra class name<\/strong><span style=\"color: #555555; font-size: 14.4px;\"> add: <\/span><strong style=\"color: #555555; font-size: 14.4px;\" data-start=\"2057\" data-end=\"2072\"><code data-start=\"2059\" data-end=\"2070\">fvf-panel<\/code><\/strong><span style=\"color: #555555; font-size: 14.4px;\">.<\/span><\/li>\n<li data-start=\"1991\" data-end=\"2171\">\n<p data-start=\"1993\" data-end=\"2171\">This paints the <strong data-start=\"2092\" data-end=\"2132\">default translucent white panel<\/strong> (adjusted in the plugin settings):<\/p>\n<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-15243 alignnone\" src=\"https:\/\/marabelia.com\/wp-content\/uploads\/2025\/09\/PARALLAX-VIDEO-FIJO-VC-5.png\" alt=\"\" width=\"649\" height=\"358\" srcset=\"https:\/\/marabelia.com\/wp-content\/uploads\/2025\/09\/PARALLAX-VIDEO-FIJO-VC-5.png 649w, https:\/\/marabelia.com\/wp-content\/uploads\/2025\/09\/PARALLAX-VIDEO-FIJO-VC-5-300x165.png 300w\" sizes=\"auto, (max-width: 649px) 100vw, 649px\" \/><\/p>\n<ul data-start=\"1991\" data-end=\"2497\">\n<li data-start=\"2172\" data-end=\"2296\">\n<p data-start=\"2174\" data-end=\"2296\"><strong data-start=\"2174\" data-end=\"2192\">Black variant<\/strong> (high contrast): also add <strong data-start=\"2224\" data-end=\"2245\"><code data-start=\"2226\" data-end=\"2243\">fvf-panel-black<\/code><\/strong><br data-start=\"2245\" data-end=\"2248\" \/>It would look like this: <strong data-start=\"2264\" data-end=\"2295\"><code data-start=\"2266\" data-end=\"2293\">fvf-panel fvf-panel-black:<\/code><\/strong><\/p>\n<\/li>\n<\/ul>\n<p data-start=\"2299\" data-end=\"2497\"><strong data-start=\"2299\" data-end=\"2312\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-15245 alignnone\" src=\"https:\/\/marabelia.com\/wp-content\/uploads\/2025\/09\/PARALLAX-VIDEO-FIJO-VC-6.png\" alt=\"\" width=\"649\" height=\"375\" srcset=\"https:\/\/marabelia.com\/wp-content\/uploads\/2025\/09\/PARALLAX-VIDEO-FIJO-VC-6.png 649w, https:\/\/marabelia.com\/wp-content\/uploads\/2025\/09\/PARALLAX-VIDEO-FIJO-VC-6-300x173.png 300w\" sizes=\"auto, (max-width: 649px) 100vw, 649px\" \/><\/strong><\/p>\n<p data-start=\"2299\" data-end=\"2497\"><strong data-start=\"2299\" data-end=\"2312\">Content<\/strong>: place your blocks inside (Text Block, Heading, Button\u2026) as usual and adjust the height of rows and columns.<\/p>\n<p data-start=\"2583\" data-end=\"2629\">In the <strong data-start=\"2589\" data-end=\"2599\">page<\/strong> (WPBakery, Backend Editor):<\/p>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul data-start=\"2633\" data-end=\"2837\">\n<li data-start=\"2633\" data-end=\"2705\">\n<p data-start=\"2635\" data-end=\"2705\"><strong data-start=\"2635\" data-end=\"2643\">Row<\/strong> where you want the effect \u2192 <strong data-start=\"2670\" data-end=\"2690\">Extra CSS Class:<\/strong> <code data-start=\"2691\" data-end=\"2702\">fvf-block<\/code>.<\/p>\n<\/li>\n<li data-start=\"2709\" data-end=\"2770\">\n<p data-start=\"2711\" data-end=\"2770\"><strong data-start=\"2711\" data-end=\"2722\">Column<\/strong> with panel \u2192 <strong data-start=\"2735\" data-end=\"2755\">Extra CSS Class:<\/strong> <code data-start=\"2756\" data-end=\"2767\">fvf-panel<\/code>.<\/p>\n<\/li>\n<li data-start=\"2774\" data-end=\"2837\">\n<p data-start=\"2776\" data-end=\"2837\"><strong data-start=\"2776\" data-end=\"2802\">Black panel (optional)<\/strong> \u2192 also add <code data-start=\"2819\" data-end=\"2836\">fvf-panel-black<\/code>.<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<blockquote data-start=\"2839\" data-end=\"2976\">\n<p data-start=\"2841\" data-end=\"2976\">The plugin paints the panel at <code data-start=\"2869\" data-end=\"2902\">.vc_column-inner &gt; .wpb_wrapper<\/code> so that the text is perfectly readable, even in themes with their own wrappers.<\/p>\n<\/blockquote>\n[\/vc_column_text][\/vc_column][\/vc_row]\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Turn any page into a <strong data-start=\"274\" data-end=\"320\">stage with fixed video or image background<\/strong>, while <strong data-start=\"331\" data-end=\"364\">rows and columns scroll<\/strong> on top. No CSS. Free and lightweight.<\/p>\n<p>Online demo: <a class=\"decorated-link\" href=\"https:\/\/marabelia.site\/parallax\/\" target=\"_new\" rel=\"noopener\" data-start=\"825\" data-end=\"857\">https:\/\/marabelia.site\/parallax\/<\/a><\/p>\n<p data-start=\"891\" data-end=\"1490\">Activate the effect <strong data-start=\"1084\" data-end=\"1106\">only where you want<\/strong> by adding a class to the <strong data-start=\"1132\" data-end=\"1140\">row<\/strong> and, to ensure readability, paint <strong data-start=\"1177\" data-end=\"1197\">color panels<\/strong> on the <strong data-start=\"1205\" data-end=\"1217\">columns<\/strong> (white by default or <strong data-start=\"1240\" data-end=\"1261\">translucent black<\/strong> with an extra class).<\/p>\n<p data-start=\"891\" data-end=\"1490\">Designed for <strong data-start=\"1299\" data-end=\"1324\">WPBakery Page Builder<\/strong>, the plugin uses the standard structure <code data-start=\"1363\" data-end=\"1410\">.wpb_column &gt; .vc_column-inner &gt; .wpb_wrapper<\/code>, so it works with the <strong data-start=\"1439\" data-end=\"1464\">vast majority of themes<\/strong> that respect this markup.<\/p>\n<p data-start=\"1492\" data-end=\"1517\"><strong data-start=\"1492\" data-end=\"1517\">Key features<\/strong><\/p>\n<ul data-start=\"1518\" data-end=\"1899\">\n<li data-start=\"1518\" data-end=\"1572\">\n<p data-start=\"1520\" data-end=\"1572\">Full-screen fixed <strong data-start=\"1526\" data-end=\"1544\">video or image background<\/strong>.<\/p>\n<\/li>\n<li data-start=\"1573\" data-end=\"1637\">\n<p data-start=\"1575\" data-end=\"1637\"><strong data-start=\"1586\" data-end=\"1608\">Selective row-based activation<\/strong> (does not affect the whole site).<\/p>\n<\/li>\n<li data-start=\"1638\" data-end=\"1713\">\n<p data-start=\"1640\" data-end=\"1713\"><strong data-start=\"1640\" data-end=\"1670\">Per-column color panel<\/strong> without CSS (default white + black variant).<\/p>\n<\/li>\n<li data-start=\"1714\" data-end=\"1785\">\n<p data-start=\"1716\" data-end=\"1785\">Controls for <strong data-start=\"1729\" data-end=\"1740\">overlay<\/strong>, <strong data-start=\"1742\" data-end=\"1752\">poster<\/strong> (mobile), and safe <strong data-start=\"1765\" data-end=\"1777\">autoplay<\/strong>.<\/p>\n<\/li>\n<li data-start=\"1827\" data-end=\"1899\">\n<p data-start=\"1829\" data-end=\"1899\">Performance: option to <strong data-start=\"1854\" data-end=\"1880\">hide video on mobile<\/strong> and use <strong data-start=\"1888\" data-end=\"1898\">poster<\/strong>.<\/p>\n<\/li>\n<\/ul>\n","protected":false},"featured_media":15270,"template":"","meta":[],"product_brand":[],"product_cat":[126,125],"product_tag":[],"class_list":{"0":"post-15282","1":"product","2":"type-product","3":"status-publish","4":"has-post-thumbnail","6":"product_cat-plugins-woocommerce","7":"product_cat-plugins","9":"first","10":"instock","11":"downloadable","12":"virtual","13":"taxable","14":"purchasable","15":"product-type-simple"},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Parallax Fixed Video for WPBakery &#8226; Marabelia | Agencia Digital en Valencia<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/marabelia.com\/en\/producto\/parallax-video-fijo-para-wpbakery-marabelia\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Parallax Fixed Video for WPBakery &#8226; Marabelia | Agencia Digital en Valencia\" \/>\n<meta property=\"og:description\" content=\"Turn any page into a stage with fixed video or image background, while rows and columns scroll on top. No CSS. Free and lightweight.  Online demo: https:\/\/marabelia.site\/parallax\/ Activate the effect only where you want by adding a class to the row and, to ensure readability, paint color panels on the columns (white by default or translucent black with an extra class). Designed for WPBakery Page Builder, the plugin uses the standard structure .wpb_column &gt; .vc_column-inner &gt; .wpb_wrapper, so it works with the vast majority of themes that respect this markup. Key features     Full-screen fixed video or image background.    Selective row-based activation (does not affect the whole site).    Per-column color panel without CSS (default white + black variant).    Controls for overlay, poster (mobile), and safe autoplay.    Performance: option to hide video on mobile and use poster.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/marabelia.com\/en\/producto\/parallax-video-fijo-para-wpbakery-marabelia\/\" \/>\n<meta property=\"og:site_name\" content=\"Marabelia | Agencia Digital en Valencia\" \/>\n<meta property=\"article:modified_time\" content=\"2025-09-27T10:30:35+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/marabelia.com\/wp-content\/uploads\/2025\/09\/MARABELIA-WOOCIRCLE-IMAGES-IMAGNES-DE-PRODUCTO.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1080\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Parallax Fixed Video for WPBakery &#8226; Marabelia | Agencia Digital en Valencia","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/marabelia.com\/en\/producto\/parallax-video-fijo-para-wpbakery-marabelia\/","og_locale":"en_US","og_type":"article","og_title":"Parallax Fixed Video for WPBakery &#8226; Marabelia | Agencia Digital en Valencia","og_description":"Turn any page into a stage with fixed video or image background, while rows and columns scroll on top. No CSS. Free and lightweight.  Online demo: https:\/\/marabelia.site\/parallax\/ Activate the effect only where you want by adding a class to the row and, to ensure readability, paint color panels on the columns (white by default or translucent black with an extra class). Designed for WPBakery Page Builder, the plugin uses the standard structure .wpb_column &gt; .vc_column-inner &gt; .wpb_wrapper, so it works with the vast majority of themes that respect this markup. Key features     Full-screen fixed video or image background.    Selective row-based activation (does not affect the whole site).    Per-column color panel without CSS (default white + black variant).    Controls for overlay, poster (mobile), and safe autoplay.    Performance: option to hide video on mobile and use poster.","og_url":"https:\/\/marabelia.com\/en\/producto\/parallax-video-fijo-para-wpbakery-marabelia\/","og_site_name":"Marabelia | Agencia Digital en Valencia","article_modified_time":"2025-09-27T10:30:35+00:00","og_image":[{"width":1080,"height":1080,"url":"https:\/\/marabelia.com\/wp-content\/uploads\/2025\/09\/MARABELIA-WOOCIRCLE-IMAGES-IMAGNES-DE-PRODUCTO.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[]}},"_links":{"self":[{"href":"https:\/\/marabelia.com\/en\/wp-json\/wp\/v2\/product\/15282","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/marabelia.com\/en\/wp-json\/wp\/v2\/product"}],"about":[{"href":"https:\/\/marabelia.com\/en\/wp-json\/wp\/v2\/types\/product"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/marabelia.com\/en\/wp-json\/wp\/v2\/media\/15270"}],"wp:attachment":[{"href":"https:\/\/marabelia.com\/en\/wp-json\/wp\/v2\/media?parent=15282"}],"wp:term":[{"taxonomy":"product_brand","embeddable":true,"href":"https:\/\/marabelia.com\/en\/wp-json\/wp\/v2\/product_brand?post=15282"},{"taxonomy":"product_cat","embeddable":true,"href":"https:\/\/marabelia.com\/en\/wp-json\/wp\/v2\/product_cat?post=15282"},{"taxonomy":"product_tag","embeddable":true,"href":"https:\/\/marabelia.com\/en\/wp-json\/wp\/v2\/product_tag?post=15282"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}