{"id":1311,"date":"2019-10-16T07:03:44","date_gmt":"2019-10-16T07:03:44","guid":{"rendered":"https:\/\/demo.tagdiv.com\/newspaper_pro\/?page_id=1311"},"modified":"2020-03-23T14:01:31","modified_gmt":"2020-03-23T14:01:31","slug":"background-parallax","status":"publish","type":"page","link":"https:\/\/demo.tagdiv.com\/newspaper_pro\/background-parallax\/","title":{"rendered":"Background Parallax"},"content":{"rendered":"<div id=\"tdi_1\" class=\"tdc-zone\"><div class=\"tdc_zone tdi_2  wpb_row td-pb-row\"  >\n<style scoped>\n\/* custom css - generated by TagDiv Composer *\/\n\n\/* custom css - generated by TagDiv Composer *\/\n.tdi_2{\r\n                    min-height: 0;\r\n                }\n<\/style><div id=\"tdi_3\" class=\"tdc-row stretch_row_content_no_space td-stretch-content\"><div class=\"vc_row tdi_4  wpb_row td-pb-row tdc-element-style\" >\n<style scoped>\n\/* custom css - generated by TagDiv Composer *\/\n\n\/* custom css - generated by TagDiv Composer *\/\n.tdi_4,\r\n                .tdi_4 .tdc-columns{\r\n                    min-height: 0;\r\n                }.tdi_4,\r\n\t\t\t\t.tdi_4 .tdc-columns{\r\n\t\t\t\t    display: block;\r\n\t\t\t\t}.tdi_4 .tdc-columns{\r\n\t\t\t\t    width: 100%;\r\n\t\t\t\t}.tdi_4:before,\r\n\t\t\t\t.tdi_4:after{\r\n\t\t\t\t    display: table;\r\n\t\t\t\t}\n\/* inline tdc_css att - generated by TagDiv Composer *\/\n\n.tdi_4{\npadding-top:350px !important;\npadding-bottom:350px !important;\nposition:relative;\n}\n\n.tdi_4 .td_block_wrap{ text-align:left }\n\n\/* landscape *\/\n@media (min-width: 1019px) and (max-width: 1140px)\n{\n.tdi_4{\npadding-top:200px !important;\npadding-bottom:200px !important;\n}\n}\n\n\/* portrait *\/\n@media (min-width: 768px) and (max-width: 1018px)\n{\n.tdi_4{\npadding-top:150px !important;\npadding-bottom:150px !important;\n}\n}\n\n\/* phone *\/\n@media (max-width: 767px)\n{\n.tdi_4{\npadding-top:100px !important;\npadding-bottom:100px !important;\n}\n}\n\n<\/style>\n<div class=\"tdi_3_rand_style td-element-style\" ><div class=\"td-element-style-before\"><style>\n\/* custom css - generated by TagDiv Composer *\/\n\n.tdi_3_rand_style > .td-element-style-before {\ncontent:'' !important;\nwidth:100% !important;\nheight:100% !important;\nposition:absolute !important;\ntop:0 !important;\nleft:0 !important;\ndisplay:block !important;\nz-index:0 !important;\nbackground-image:url(\"https:\/\/demo.tagdiv.com\/newspaper_pro\/wp-content\/uploads\/2019\/10\/woman.jpg\") !important;\nbackground-position:center center !important;\nbackground-size:cover !important;\n}\n<\/style><\/div><style>\n\/* custom css - generated by TagDiv Composer *\/\n \n.tdi_3_rand_style::after {\ncontent:'' !important;\nwidth:100% !important;\nheight:100% !important;\nposition:absolute !important;\ntop:0 !important;\nleft:0 !important;\nz-index:0 !important;\ndisplay:block !important;\nbackground: linear-gradient(rgba(99,60,8,0.4), rgba(11,69,168,0.4)) !important;\n}\n<\/style><\/div><div class=\"vc_column tdi_6  wpb_column vc_column_container tdc-column td-pb-span12\">\n<style scoped>\n\/* custom css - generated by TagDiv Composer *\/\n\n\/* custom css - generated by TagDiv Composer *\/\n.tdi_6{\r\n                    vertical-align: baseline;\r\n                }.tdi_6 > .wpb_wrapper,\r\n\t\t\t\t.tdi_6 > .wpb_wrapper > .tdc-elements{\r\n\t\t\t\t    display: block;\r\n\t\t\t\t}.tdi_6 > .wpb_wrapper > .tdc-elements{\r\n\t\t\t\t    width: 100%;\r\n\t\t\t\t}.tdi_6 > .wpb_wrapper > .vc_row_inner{\r\n\t\t\t\t    width: auto;\r\n\t\t\t\t}.tdi_6 > .wpb_wrapper{\r\n\t\t\t\t    width: auto;\r\n\t\t\t\t    height: auto;\r\n\t\t\t\t}\n<\/style><div class=\"wpb_wrapper\" ><div class=\"tdm_block td_block_wrap tdm_block_column_title tdi_7 tdm-content-horiz-center td-pb-border-top td_block_template_1\"  data-td-block-uid=\"tdi_7\" >\n<style>\n\/* custom css - generated by TagDiv Composer *\/\n.tdm_block_column_title{\r\n                  margin-bottom: 0;\r\n                  display: inline-block;\r\n                  width: 100%;\r\n                }\n<\/style><div class=\"td-block-row\"><div class=\"td-block-span12 tdm-col\">\n<style>\n\/* custom css - generated by TagDiv Composer *\/\nbody .tdi_8 .tdm-title{\r\n\t\t\t\t\tcolor: #ffffff;\r\n\t\t\t\t}.tdi_8 .tdm-title{\r\n\t\t\t\t\tfont-family:Open Sans !important;font-size:60px !important;font-weight:500 !important;text-transform:uppercase !important;letter-spacing:-2px !important;\r\n\t\t\t\t}\n\n\/* landscape *\/\n@media (min-width: 1019px) and (max-width: 1140px){\n.tdi_8 .tdm-title{\r\n\t\t\t\t\tfont-size:50px !important;\r\n\t\t\t\t}\n}\n\n\/* portrait *\/\n@media (min-width: 768px) and (max-width: 1018px){\n.tdi_8 .tdm-title{\r\n\t\t\t\t\tfont-size:40px !important;\r\n\t\t\t\t}\n}\n\n\/* phone *\/\n@media (max-width: 767px){\n.tdi_8 .tdm-title{\r\n\t\t\t\t\tfont-size:30px !important;\r\n\t\t\t\t}\n}\n<\/style><div class=\"tds-title tds-title1 td-fix-index tdi_8 \"><h3 class=\"tdm-title tdm-title-md\">Newspaper<\/h3><\/div><\/div><\/div><\/div><div class=\"tdm_block td_block_wrap tdm_block_inline_text tdi_9 td-pb-border-top td_block_template_1\"  data-td-block-uid=\"tdi_9\" >\n<style>\n\n\/* inline tdc_css att - generated by TagDiv Composer *\/\n\n\/* portrait *\/\n@media (min-width: 768px) and (max-width: 1018px)\n{\n.tdi_9{\nmargin-top:-15px !important;\n}\n}\n\n\/* phone *\/\n@media (max-width: 767px)\n{\n.tdi_9{\nmargin-top:-25px !important;\n}\n}\n\n<\/style>\n<style>\n\/* custom css - generated by TagDiv Composer *\/\n.tdm_block.tdm_block_inline_text{\r\n                  margin-bottom: 0;\r\n                  vertical-align: top;\r\n                }.tdm_block.tdm_block_inline_text .tdm-descr{\r\n                  margin-bottom: 0;\r\n                  -webkit-transform: translateZ(0);\r\n                  transform: translateZ(0);\r\n                }.tdc-row-content-vert-center .tdm-inline-text-yes{\r\n                  vertical-align: middle;\r\n                }.tdc-row-content-vert-bottom .tdm-inline-text-yes{\r\n                  vertical-align: bottom;\r\n                }.tdi_9{\r\n                    text-align: center !important;\r\n                    margin-right: auto; \r\n                    margin-left: auto;\r\n                }.tdi_9 .tdm-descr{\r\n                    color: #ffffff;\r\n                \r\n\t\t\t\t\tfont-family:Alex Brush !important;font-size:100px !important;line-height:0.8 !important;\r\n\t\t\t\t}\n\n\/* landscape *\/\n@media (min-width: 1019px) and (max-width: 1140px){\n.tdi_9 .tdm-descr{\r\n\t\t\t\t\tfont-size:80px !important;\r\n\t\t\t\t}\n}\n\n\/* portrait *\/\n@media (min-width: 768px) and (max-width: 1018px){\n.tdi_9 .tdm-descr{\r\n\t\t\t\t\tfont-size:60px !important;\r\n\t\t\t\t}\n}\n\n\/* phone *\/\n@media (max-width: 767px){\n.tdi_9 .tdm-descr{\r\n\t\t\t\t\tfont-size:40px !important;\r\n\t\t\t\t}\n}\n<\/style><p class=\"tdm-descr\">Background Parallax<\/p><\/div><div class=\"wpb_wrapper td_block_separator td_block_wrap vc_separator tdi_11  td_separator_solid td_separator_center\"><span style=\"border-color:#ffffff;border-width:2px;width:10%;\"><\/span>\n<style scoped>\n\/* custom css - generated by TagDiv Composer *\/\n\n\/* custom css - generated by TagDiv Composer *\/\n.td_block_separator{\r\n                  width: 100%;\r\n                  align-items: center;\r\n                  margin-bottom: 38px;\r\n                  padding-bottom: 10px;\r\n                }.td_block_separator span{\r\n                  position: relative;\r\n                  display: block;\r\n                  margin: 0 auto;\r\n                  width: 100%;\r\n                  height: 1px;\r\n                  border-top: 1px solid #EBEBEB;\r\n                }.td_separator_align_left span{\r\n                  margin-left: 0;\r\n                }.td_separator_align_right span{\r\n                  margin-right: 0;\r\n                }.td_separator_dashed span{\r\n                  border-top-style: dashed;\r\n                }.td_separator_dotted span{\r\n                  border-top-style: dotted;\r\n                }.td_separator_double span{\r\n                  height: 3px;\r\n                  border-bottom: 1px solid #EBEBEB;\r\n                }.td_separator_shadow > span{\r\n                  position: relative;\r\n                  height: 20px;\r\n                  overflow: hidden;\r\n                  border: 0;\r\n                  color: #EBEBEB;\r\n                }.td_separator_shadow > span > span{\r\n                  position: absolute;\r\n                  top: -30px;\r\n                  left: 0;\r\n                  right: 0;\r\n                  margin: 0 auto;\r\n                  height: 13px;\r\n                  width: 98%;\r\n                  border-radius: 100%;\r\n                }html :where([style*='border-width']){\r\n                    border-style: none;\r\n                }\n\/* inline tdc_css att - generated by TagDiv Composer *\/\n\n.tdi_11{\nmargin-top:30px !important;\nmargin-bottom:70px !important;\n}\n\n\/* landscape *\/\n@media (min-width: 1019px) and (max-width: 1140px)\n{\n.tdi_11{\nmargin-top:20px !important;\nmargin-bottom:50px !important;\n}\n}\n\n\/* portrait *\/\n@media (min-width: 768px) and (max-width: 1018px)\n{\n.tdi_11{\nmargin-top:10px !important;\nmargin-bottom:40px !important;\n}\n}\n\n\/* phone *\/\n@media (max-width: 767px)\n{\n.tdi_11{\nmargin-top:10px !important;\nmargin-bottom:30px !important;\n}\n}\n\n<\/style><\/div><div class=\"tdm_block td_block_wrap tdm_block_inline_text tdi_12 td-pb-border-top td_block_template_1\"  data-td-block-uid=\"tdi_12\" >\n<style>\n\n\/* inline tdc_css att - generated by TagDiv Composer *\/\n\n.tdi_12{\nwidth:52% !important;\n}\n\n\/* landscape *\/\n@media (min-width: 1019px) and (max-width: 1140px)\n{\n.tdi_12{\nwidth:70% !important;\n}\n}\n\n\/* portrait *\/\n@media (min-width: 768px) and (max-width: 1018px)\n{\n.tdi_12{\nwidth:86% !important;\n}\n}\n\n\/* phone *\/\n@media (max-width: 767px)\n{\n.tdi_12{\nwidth:100% !important;\n}\n}\n\n<\/style>\n<style>\n\/* custom css - generated by TagDiv Composer *\/\n.tdi_12{\r\n                    text-align: center !important;\r\n                    margin-right: auto; \r\n                    margin-left: auto;\r\n                }.tdi_12 .tdm-descr{\r\n                    color: #ffffff;\r\n                \r\n\t\t\t\t\tfont-family:Open Sans !important;font-size:25px !important;line-height:1.4 !important;font-weight:300 !important;\r\n\t\t\t\t}\n\n\/* landscape *\/\n@media (min-width: 1019px) and (max-width: 1140px){\n.tdi_12 .tdm-descr{\r\n\t\t\t\t\tfont-size:22px !important;\r\n\t\t\t\t}\n}\n\n\/* portrait *\/\n@media (min-width: 768px) and (max-width: 1018px){\n.tdi_12 .tdm-descr{\r\n\t\t\t\t\tfont-size:22px !important;\r\n\t\t\t\t}\n}\n\n\/* phone *\/\n@media (max-width: 767px){\n.tdi_12 .tdm-descr{\r\n\t\t\t\t\tfont-size:16px !important;\r\n\t\t\t\t}\n}\n<\/style><p class=\"tdm-descr\">Use this amazing feature on the background of any row!\nUpload your image and configure everything in a heartbeat: check the parallax box, configure the opacity and color overlay!<\/p><\/div><\/div><\/div><\/div><\/div>\r\n\t\t\t<script>\r\n\r\n\t\t\t\tjQuery(window).ready(function () {\r\n\r\n\t\t\t\t\t\/\/ We need timeout because the content must be rendered and interpreted on client\r\n\t\t\t\t\tsetTimeout(function () {\r\n\r\n\t\t\t\t\t\tvar $content = jQuery('body').find('#tdc-live-iframe'),\r\n\t\t\t\t\t\t\trefWindow = undefined;\r\n\r\n\t\t\t\t\t\tif ($content.length) {\r\n\t\t\t\t\t\t\t$content = $content.contents();\r\n\t\t\t\t\t\t\trefWindow = document.getElementById('tdc-live-iframe').contentWindow || document.getElementById('tdc-live-iframe').contentDocument;\r\n\r\n\t\t\t\t\t\t} else {\r\n\t\t\t\t\t\t\t$content = jQuery('body');\r\n\t\t\t\t\t\t\trefWindow = window;\r\n\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\t$content.find('#tdi_3 .td-element-style-before').each(function (index, element) {\r\n\t\t\t\t\t\t\tif ('undefined' !== typeof refWindow.td_compute_parallax_background) {\r\n\t\t\t\t\t\t\t\trefWindow.td_compute_parallax_background(element);\r\n\t\t\t\t\t\t\t\treturn;\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t});\r\n\r\n\t\t\t\t\t\t$content.find('#tdi_3 .tdc-video-parallax-wrapper').each(function (index, element) {\r\n\t\t\t\t\t\t\tif ( 'undefined' !== typeof refWindow.td_compute_parallax_background ) {\r\n\t\t\t\t\t\t\t\trefWindow.td_compute_parallax_background(element);\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t});\r\n\r\n\r\n\t\t\t\t\t\tif ('undefined' !== typeof refWindow.td_compute_parallax_background) {\r\n\t\t\t\t\t\t\trefWindow.tdAnimationScroll.compute_all_items();\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t});\r\n\r\n\t\t\t\t}, 200);\r\n\t\t\t<\/script>\r\n\r\n\t\t\t<div id=\"tdi_13\" class=\"tdc-row tdc-row-video-background stretch_row_content td-stretch-content\"><div class=\"vc_row tdi_14  wpb_row td-pb-row tdc-element-style\" ><div class=\"tdc-video-outer-wrapper\"><div class=\"tdc-video-parallax-wrapper\"><div class=\"tdc-video-inner-wrapper\" data-video-service=\"youtube\" data-video-js-switch=\"false\"  data-video-scale=\"\" data-video-opacity=\"\">                    <style>\r\n\r\n                        \/* custom css - generated by TagDiv Composer *\/\r\n                        .tdc-row-video-background {\r\n                            position: relative;\r\n                        }\r\n                        .tdc-video-outer-wrapper {\r\n                            position: absolute;\r\n                            width: 100%;\r\n                            height: 100%;\r\n                            overflow: hidden;\r\n                            left: 0;\r\n                            right: 0;\r\n                            pointer-events: none;\r\n                            top: 0;\r\n                        }\r\n                        .tdc-video-thumb-on-mobile {\r\n                            display: none;\r\n                            background-size: cover;\r\n                            background-position: center top;\r\n                            width: 100%;\r\n                            height: 100%;\r\n                            position: absolute;\r\n                            top: 0;\r\n                            left: 0;\r\n                        }\r\n                        @media (max-width: 767px) {\r\n                            .tdc-video-outer-wrapper {\r\n                                width: 100vw;\r\n                                left: 50%;\r\n                                transform: translateX(-50%);\r\n                                -webkit-transform: translateX(-50%);\r\n                            }\r\n                        }\r\n                        .tdc-video-parallax-wrapper,\r\n                        .tdc-video-inner-wrapper {\r\n                            position: absolute;\r\n                            width: 100%;\r\n                            height: 100%;\r\n                            left: 0;\r\n                            right: 0;\r\n                        }\r\n                        .tdc-video-inner-wrapper iframe,\r\n                        .tdc-video-inner-wrapper video {\r\n                            position: absolute;\r\n                            left: 50%;\r\n                            top: 50%;\r\n                            transform: translate3d(-50%, -50%, 0);\r\n                            -webkit-transform: translate3d(-50%, -50%, 0);\r\n                            -moz-transform: translate3d(-50%, -50%, 0);\r\n                            -ms-transform: translate3d(-50%, -50%, 0);\r\n                            -o-transform: translate3d(-50%, -50%, 0);\r\n                        }\r\n                        .tdc-video-inner-wrapper iframe {\r\n                            opacity: 0;\r\n                            transition: opacity 0.4s;\r\n                        }\r\n                        .tdc-video-inner-wrapper video {\r\n                            max-width: none;\r\n                            width: 100%;\r\n                            height: 100%;\r\n                            object-fit: cover;\r\n                        }\r\n                        .tdc-video-inner-wrapper iframe.tdc-video-background-visible {\r\n                            opacity: 1 !important;\r\n                        }\r\n                        .tdc-row[class*=\"stretch_row\"] .tdc-video-outer-wrapper {\r\n                            width: 100vw;\r\n                            left: 50%;\r\n                            transform: translateX(-50%);\r\n                            -webkit-transform: translateX(-50%);\r\n                            -moz-transform: translateX(-50%);\r\n                            -ms-transform: translateX(-50%);\r\n                            -o-transform: translateX(-50%);\r\n                        }\r\n\r\n                    <\/style>\r\n                    <iframe loading=\"lazy\" width=\"480\" height=\"270\" src=\"\/\/www.youtube.com\/embed\/hpRQo0yD-FU\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><div class=\"tdc-video-thumb-on-mobile\" style=\"background-image:url(https:\/\/img.youtube.com\/vi\/hpRQo0yD-FU\/sddefault.jpg);\"><\/div><\/div><\/div><\/div>                    <script>\r\n                        jQuery(window).ready(function () {\r\n\r\n                            \/\/ We need timeout because the content must be rendered and interpreted on client.\r\n                            setTimeout(function() {\r\n\r\n                                let $content = jQuery('body').find('#tdc-live-iframe')\r\n                                if ($content.length) {\r\n                                    $content = $content.contents()\r\n                                } else {\r\n                                    $content = jQuery('body')\r\n                                }\r\n\r\n                                const $tdcVideoInnerWrappers = $content.find('#tdi_13 .tdc-video-inner-wrapper:first')\r\n                                $tdcVideoInnerWrappers.each(function() {\r\n                                    const $wrapper = jQuery(this)\r\n                                    const videoService = $wrapper.data('video-service')\r\n\r\n                                    if ('undefined' !== typeof $wrapper.data('video-scale')) {\r\n                                        $wrapper.css({\r\n                                            transform: 'scale(' + $wrapper.data('video-scale') + ')'\r\n                                        });\r\n                                    }\r\n                                    if ('undefined' !== typeof $wrapper.data('video-opacity')) {\r\n                                        $wrapper.css({\r\n                                            opacity: $wrapper.data('video-opacity')\r\n                                        });\r\n                                    }\r\n\r\n                                    switch ( videoService ) {\r\n                                        case 'self-hosted':\r\n                                            const videoJSSwitch = $wrapper.data('video-js-switch')\r\n\r\n                                            if ( videoJSSwitch ) {\r\n                                                const $window = jQuery(window)\r\n                                                const isMobile = $window.outerWidth() <= 500\r\n                                                const desktopVideoURL = $wrapper.data('desktop-video')\r\n                                                const mobileImageURL = $wrapper.data('mobile-image')\r\n                                                const mobileVideoURL = $wrapper.data('mobile-video')\r\n                                                let contentHTML = ''\r\n\r\n                                                if ( !isMobile || ( isMobile && mobileImageURL === '' ) ) {\r\n                                                    contentHTML = '<div class=\"wpb_video_wrapper\">'\r\n                                                        contentHTML += '<video autoplay muted playsinline loop>'\r\n                                                            contentHTML += '<source src=\"' + ( !isMobile ? desktopVideoURL : mobileVideoURL ) + '\">'\r\n                                                        contentHTML += 'Your browser does not support the video tag.'\r\n                                                        contentHTML += '<\/video>'\r\n                                                    contentHTML += '<\/div>'\r\n                                                } else {\r\n                                                    contentHTML = '<div class=\"tdc-video-thumb-on-mobile tdc-is-video-image\" style=\"background-image:url(' + mobileImageURL + ')\"><\/div>'\r\n                                                }\r\n\r\n                                                $wrapper.append(contentHTML)\r\n                                            }\r\n\r\n                                            $content.find('.tdc-video-thumb-on-mobile').show()\r\n\r\n                                            break;\r\n\r\n                                        case 'youtube':\r\n                                            const $iframe = $wrapper.find('iframe')\r\n                                            const autoplayOnMobile = false;\r\n\r\n                                            if ( $iframe.length ) {\r\n                                                if ('undefined' === typeof $iframe.data('src-src')) {\r\n                                                    $iframe.data('api-src', $iframe.attr('src'));\r\n                                                }\r\n\r\n                                                let iframeSettingsStr = '',\r\n                                                    iframeSettings = {\r\n                                                        autoplay: 1,\r\n                                                        loop: 1,\r\n                                                        mute: 1,\r\n                                                        showinfo: 0,\r\n                                                        controls: 0,\r\n                                                        start: 2,\r\n                                                        playlist: 'hpRQo0yD-FU',\r\n                                                    };\r\n\r\n                                                for ( let prop in iframeSettings ) {\r\n                                                    iframeSettingsStr += prop + '=' + iframeSettings[prop] + '&';\r\n                                                }\r\n\r\n                                                $iframe.attr('src', $iframe.data('api-src') + '?' + iframeSettingsStr);\r\n\r\n                                                $iframe.on( 'load', function () {\r\n                                                    var $iframe = jQuery(this),\r\n                                                        iframeWidth = $iframe.width(),\r\n                                                        iframeHeight = $iframe.height(),\r\n                                                        iframeAspectRatio = iframeHeight \/ iframeWidth,\r\n                                                        wrapperWidth = $wrapper.width(),\r\n                                                        wrapperHeight = $wrapper.height(),\r\n                                                        wrapperAspectRatio = wrapperHeight \/ wrapperWidth;\r\n\r\n                                                    $iframe.attr( 'aspect-ratio', iframeAspectRatio );\r\n\r\n                                                    if (iframeAspectRatio < wrapperAspectRatio) {\r\n                                                        $iframe.css({\r\n                                                            width: wrapperHeight \/ iframeAspectRatio,\r\n                                                            height: wrapperHeight\r\n                                                        });\r\n                                                    } else if (iframeAspectRatio > wrapperAspectRatio) {\r\n                                                        $iframe.css({\r\n                                                            width: '100%',\r\n                                                            height: iframeAspectRatio * wrapperWidth\r\n                                                        });\r\n                                                    }\r\n\r\n                                                    setTimeout(function () {\r\n                                                        $iframe.addClass('tdc-video-background-visible');\r\n                                                    }, 100);\r\n                                                });\r\n\r\n                                                if ( !autoplayOnMobile && tdDetect.isMobileDevice ) {\r\n                                                    $content.find('.tdc-video-parallax-wrapper iframe').remove();\r\n                                                    $content.find('.tdc-video-thumb-on-mobile').show();\r\n                                                }\r\n                                            }\r\n\r\n                                            break;\r\n                                    }\r\n                                });\r\n\r\n                            }, 200);\r\n\r\n                        });\r\n                    <\/script>\r\n                    \n<style scoped>\n\/* custom css - generated by TagDiv Composer *\/\n\n\/* custom css - generated by TagDiv Composer *\/\n.tdi_14,\r\n                .tdi_14 .tdc-columns{\r\n                    min-height: 0;\r\n                }.tdi_14,\r\n\t\t\t\t.tdi_14 .tdc-columns{\r\n\t\t\t\t    display: block;\r\n\t\t\t\t}.tdi_14 .tdc-columns{\r\n\t\t\t\t    width: 100%;\r\n\t\t\t\t}.tdi_14:before,\r\n\t\t\t\t.tdi_14:after{\r\n\t\t\t\t    display: table;\r\n\t\t\t\t}\n\/* inline tdc_css att - generated by TagDiv Composer *\/\n\n.tdi_14{\npadding-top:250px !important;\npadding-bottom:250px !important;\nposition:relative;\n}\n\n.tdi_14 .td_block_wrap{ text-align:left }\n\n\/* landscape *\/\n@media (min-width: 1019px) and (max-width: 1140px)\n{\n.tdi_14{\npadding-top:200px !important;\npadding-bottom:200px !important;\n}\n}\n\n\/* portrait *\/\n@media (min-width: 768px) and (max-width: 1018px)\n{\n.tdi_14{\npadding-top:150px !important;\npadding-bottom:150px !important;\n}\n}\n\n\/* phone *\/\n@media (max-width: 767px)\n{\n.tdi_14{\npadding-top:100px !important;\npadding-bottom:100px !important;\n}\n}\n\n<\/style>\n<div class=\"tdi_13_rand_style td-element-style\" ><style>\n\/* custom css - generated by TagDiv Composer *\/\n \n.tdi_13_rand_style::after {\ncontent:'' !important;\nwidth:100% !important;\nheight:100% !important;\nposition:absolute !important;\ntop:0 !important;\nleft:0 !important;\nz-index:0 !important;\ndisplay:block !important;\nbackground: linear-gradient(rgba(15,169,216,0.5), rgba(13,11,160,0.49)) !important;\n}\n<\/style><\/div><div class=\"vc_column tdi_16  wpb_column vc_column_container tdc-column td-pb-span12\">\n<style scoped>\n\/* custom css - generated by TagDiv Composer *\/\n\n\/* custom css - generated by TagDiv Composer *\/\n.tdi_16{\r\n                    vertical-align: baseline;\r\n                }.tdi_16 > .wpb_wrapper,\r\n\t\t\t\t.tdi_16 > .wpb_wrapper > .tdc-elements{\r\n\t\t\t\t    display: block;\r\n\t\t\t\t}.tdi_16 > .wpb_wrapper > .tdc-elements{\r\n\t\t\t\t    width: 100%;\r\n\t\t\t\t}.tdi_16 > .wpb_wrapper > .vc_row_inner{\r\n\t\t\t\t    width: auto;\r\n\t\t\t\t}.tdi_16 > .wpb_wrapper{\r\n\t\t\t\t    width: auto;\r\n\t\t\t\t    height: auto;\r\n\t\t\t\t}\n<\/style><div class=\"wpb_wrapper\" ><div class=\"tdm_block td_block_wrap tdm_block_inline_text tdi_17 td-pb-border-top td_block_template_1\"  data-td-block-uid=\"tdi_17\" >\n<style>\n\n\/* inline tdc_css att - generated by TagDiv Composer *\/\n\n\/* portrait *\/\n@media (min-width: 768px) and (max-width: 1018px)\n{\n.tdi_17{\nmargin-top:-15px !important;\n}\n}\n\n\/* phone *\/\n@media (max-width: 767px)\n{\n.tdi_17{\nmargin-top:-15px !important;\n}\n}\n\n<\/style>\n<style>\n\/* custom css - generated by TagDiv Composer *\/\n.tdi_17{\r\n                    text-align: center !important;\r\n                    margin-right: auto; \r\n                    margin-left: auto;\r\n                }.tdi_17 .tdm-descr{\r\n                    color: #ffffff;\r\n                \r\n\t\t\t\t\tfont-family:Alex Brush !important;font-size:100px !important;line-height:0.8 !important;\r\n\t\t\t\t}\n\n\/* landscape *\/\n@media (min-width: 1019px) and (max-width: 1140px){\n.tdi_17 .tdm-descr{\r\n\t\t\t\t\tfont-size:80px !important;\r\n\t\t\t\t}\n}\n\n\/* portrait *\/\n@media (min-width: 768px) and (max-width: 1018px){\n.tdi_17 .tdm-descr{\r\n\t\t\t\t\tfont-size:60px !important;\r\n\t\t\t\t}\n}\n\n\/* phone *\/\n@media (max-width: 767px){\n.tdi_17 .tdm-descr{\r\n\t\t\t\t\tfont-size:40px !important;\r\n\t\t\t\t}\n}\n<\/style><p class=\"tdm-descr\">Video Parallax<\/p><\/div><div class=\"wpb_wrapper td_block_separator td_block_wrap vc_separator tdi_19  td_separator_solid td_separator_center\"><span style=\"border-color:#ffffff;border-width:2px;width:10%;\"><\/span>\n<style scoped>\n\/* custom css - generated by TagDiv Composer *\/\n\n\/* inline tdc_css att - generated by TagDiv Composer *\/\n\n.tdi_19{\nmargin-top:20px !important;\nmargin-bottom:40px !important;\n}\n\n\/* landscape *\/\n@media (min-width: 1019px) and (max-width: 1140px)\n{\n.tdi_19{\nmargin-top:20px !important;\nmargin-bottom:50px !important;\n}\n}\n\n\/* portrait *\/\n@media (min-width: 768px) and (max-width: 1018px)\n{\n.tdi_19{\nmargin-top:10px !important;\nmargin-bottom:40px !important;\n}\n}\n\n\/* phone *\/\n@media (max-width: 767px)\n{\n.tdi_19{\nmargin-top:10px !important;\nmargin-bottom:30px !important;\n}\n}\n\n<\/style><\/div><div class=\"tdm_block td_block_wrap tdm_block_inline_text tdi_20 td-pb-border-top td_block_template_1\"  data-td-block-uid=\"tdi_20\" >\n<style>\n\n\/* inline tdc_css att - generated by TagDiv Composer *\/\n\n.tdi_20{\nwidth:50% !important;\n}\n\n\/* landscape *\/\n@media (min-width: 1019px) and (max-width: 1140px)\n{\n.tdi_20{\nwidth:60% !important;\n}\n}\n\n\/* portrait *\/\n@media (min-width: 768px) and (max-width: 1018px)\n{\n.tdi_20{\nwidth:75% !important;\n}\n}\n\n\/* phone *\/\n@media (max-width: 767px)\n{\n.tdi_20{\nwidth:100% !important;\n}\n}\n\n<\/style>\n<style>\n\/* custom css - generated by TagDiv Composer *\/\n.tdi_20{\r\n                    text-align: center !important;\r\n                    margin-right: auto; \r\n                    margin-left: auto;\r\n                }.tdi_20 .tdm-descr{\r\n                    color: #ffffff;\r\n                \r\n\t\t\t\t\tfont-family:Open Sans !important;font-size:25px !important;line-height:1.4 !important;font-weight:300 !important;\r\n\t\t\t\t}\n\n\/* landscape *\/\n@media (min-width: 1019px) and (max-width: 1140px){\n.tdi_20 .tdm-descr{\r\n\t\t\t\t\tfont-size:22px !important;\r\n\t\t\t\t}\n}\n\n\/* portrait *\/\n@media (min-width: 768px) and (max-width: 1018px){\n.tdi_20 .tdm-descr{\r\n\t\t\t\t\tfont-size:22px !important;\r\n\t\t\t\t}\n}\n\n\/* phone *\/\n@media (max-width: 767px){\n.tdi_20 .tdm-descr{\r\n\t\t\t\t\tfont-size:16px !important;\r\n\t\t\t\t}\n}\n<\/style><p class=\"tdm-descr\">You can even use the parallax feature on your video backgrounds! Input the video ID, check the \"Add Parallax\" box, and scroll to see it live!<\/p><\/div><\/div><\/div><\/div><\/div>\r\n\t\t\t<script>\r\n\r\n\t\t\t\tjQuery(window).ready(function () {\r\n\r\n\t\t\t\t\t\/\/ We need timeout because the content must be rendered and interpreted on client\r\n\t\t\t\t\tsetTimeout(function () {\r\n\r\n\t\t\t\t\t\tvar $content = jQuery('body').find('#tdc-live-iframe'),\r\n\t\t\t\t\t\t\trefWindow = undefined;\r\n\r\n\t\t\t\t\t\tif ($content.length) {\r\n\t\t\t\t\t\t\t$content = $content.contents();\r\n\t\t\t\t\t\t\trefWindow = document.getElementById('tdc-live-iframe').contentWindow || document.getElementById('tdc-live-iframe').contentDocument;\r\n\r\n\t\t\t\t\t\t} else {\r\n\t\t\t\t\t\t\t$content = jQuery('body');\r\n\t\t\t\t\t\t\trefWindow = window;\r\n\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\t$content.find('#tdi_13 .td-element-style-before').each(function (index, element) {\r\n\t\t\t\t\t\t\tif ('undefined' !== typeof refWindow.td_compute_parallax_background) {\r\n\t\t\t\t\t\t\t\trefWindow.td_compute_parallax_background(element);\r\n\t\t\t\t\t\t\t\treturn;\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t});\r\n\r\n\t\t\t\t\t\t$content.find('#tdi_13 .tdc-video-parallax-wrapper').each(function (index, element) {\r\n\t\t\t\t\t\t\tif ( 'undefined' !== typeof refWindow.td_compute_parallax_background ) {\r\n\t\t\t\t\t\t\t\trefWindow.td_compute_parallax_background(element);\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t});\r\n\r\n\r\n\t\t\t\t\t\tif ('undefined' !== typeof refWindow.td_compute_parallax_background) {\r\n\t\t\t\t\t\t\trefWindow.tdAnimationScroll.compute_all_items();\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t});\r\n\r\n\t\t\t\t}, 200);\r\n\t\t\t<\/script>\r\n\r\n\t\t\t<\/div><\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1311","page","type-page","status-publish"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v23.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Background Parallax - Newspaper Demo | The Best News Magazine WordPress Theme<\/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:\/\/demo.tagdiv.com\/newspaper_pro\/background-parallax\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Background Parallax - Newspaper Demo | The Best News Magazine WordPress Theme\" \/>\n<meta property=\"og:url\" content=\"https:\/\/demo.tagdiv.com\/newspaper_pro\/background-parallax\/\" \/>\n<meta property=\"og:site_name\" content=\"Newspaper Demo | The Best News Magazine WordPress Theme\" \/>\n<meta property=\"article:modified_time\" content=\"2020-03-23T14:01:31+00:00\" \/>\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=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/demo.tagdiv.com\/newspaper_pro\/background-parallax\/\",\"url\":\"https:\/\/demo.tagdiv.com\/newspaper_pro\/background-parallax\/\",\"name\":\"Background Parallax - Newspaper Demo | The Best News Magazine WordPress Theme\",\"isPartOf\":{\"@id\":\"https:\/\/demo.tagdiv.com\/newspaper_pro\/#website\"},\"datePublished\":\"2019-10-16T07:03:44+00:00\",\"dateModified\":\"2020-03-23T14:01:31+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/demo.tagdiv.com\/newspaper_pro\/background-parallax\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/demo.tagdiv.com\/newspaper_pro\/background-parallax\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/demo.tagdiv.com\/newspaper_pro\/background-parallax\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/demo.tagdiv.com\/newspaper_pro\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Background Parallax\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/demo.tagdiv.com\/newspaper_pro\/#website\",\"url\":\"https:\/\/demo.tagdiv.com\/newspaper_pro\/\",\"name\":\"Newspaper Demo | The Best News Magazine WordPress Theme\",\"description\":\"Discover the stunning features and widgets packed in the Newspaper WordPress Theme with Newspaper Default Demo website. Experience the best news theme now!\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/demo.tagdiv.com\/newspaper_pro\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Background Parallax - Newspaper Demo | The Best News Magazine WordPress Theme","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:\/\/demo.tagdiv.com\/newspaper_pro\/background-parallax\/","og_locale":"en_US","og_type":"article","og_title":"Background Parallax - Newspaper Demo | The Best News Magazine WordPress Theme","og_url":"https:\/\/demo.tagdiv.com\/newspaper_pro\/background-parallax\/","og_site_name":"Newspaper Demo | The Best News Magazine WordPress Theme","article_modified_time":"2020-03-23T14:01:31+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/demo.tagdiv.com\/newspaper_pro\/background-parallax\/","url":"https:\/\/demo.tagdiv.com\/newspaper_pro\/background-parallax\/","name":"Background Parallax - Newspaper Demo | The Best News Magazine WordPress Theme","isPartOf":{"@id":"https:\/\/demo.tagdiv.com\/newspaper_pro\/#website"},"datePublished":"2019-10-16T07:03:44+00:00","dateModified":"2020-03-23T14:01:31+00:00","breadcrumb":{"@id":"https:\/\/demo.tagdiv.com\/newspaper_pro\/background-parallax\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/demo.tagdiv.com\/newspaper_pro\/background-parallax\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/demo.tagdiv.com\/newspaper_pro\/background-parallax\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/demo.tagdiv.com\/newspaper_pro\/"},{"@type":"ListItem","position":2,"name":"Background Parallax"}]},{"@type":"WebSite","@id":"https:\/\/demo.tagdiv.com\/newspaper_pro\/#website","url":"https:\/\/demo.tagdiv.com\/newspaper_pro\/","name":"Newspaper Demo | The Best News Magazine WordPress Theme","description":"Discover the stunning features and widgets packed in the Newspaper WordPress Theme with Newspaper Default Demo website. Experience the best news theme now!","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/demo.tagdiv.com\/newspaper_pro\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/demo.tagdiv.com\/newspaper_pro\/wp-json\/wp\/v2\/pages\/1311"}],"collection":[{"href":"https:\/\/demo.tagdiv.com\/newspaper_pro\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demo.tagdiv.com\/newspaper_pro\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demo.tagdiv.com\/newspaper_pro\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demo.tagdiv.com\/newspaper_pro\/wp-json\/wp\/v2\/comments?post=1311"}],"version-history":[{"count":0,"href":"https:\/\/demo.tagdiv.com\/newspaper_pro\/wp-json\/wp\/v2\/pages\/1311\/revisions"}],"wp:attachment":[{"href":"https:\/\/demo.tagdiv.com\/newspaper_pro\/wp-json\/wp\/v2\/media?parent=1311"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}