Style Editor Docs
     
  • Home
  • Add-ons
  • Templates
    • Zion
    • Alsten
    • Lemberg
    • Bergen
    • Hafen
    • Altona
    • Enkel
    • Horten
    • Hisingen
    • Agen
    • Tjörn
    • Halmstad
    • Öland
  • Support
    • Style Switcher
    • Common Issues
    • Installation
    • Guides
    • Blog
    • Updates
    • Marketplace
  • Home
  • Add-ons
  • Templates
    • Zion
    • Alsten
    • Lemberg
    • Bergen
    • Hafen
    • Altona
    • Enkel
    • Horten
    • Hisingen
    • Agen
    • Tjörn
    • Halmstad
    • Öland
  • Support
    • Style Switcher
    • Common Issues
    • Installation
    • Guides
    • Blog
    • Updates
    • Marketplace
  1. Support

Adding a video to parallax

tutorial

How to display a youtube video in parallax widget

This is video parallax

The text color in this example is white. You can add here anything what you want: title, simple text, links, button or custom widget .


Youtube video

<div class="is-fullwidth bg-section rel h-100 is-parallax is--flex video-hero" style=
"background: url('https://u.jimcdn.com/cms/o/s1aeecbbb2a5865b1/userlayout/img/video-parallax.jpg?t=1594537768') no-repeat center;">
    <div class="hs-overlay opacity-8">
    </div>

    <div class="inner rel color-white m-padding cc-clearover" style="padding:250px 0;">
        <div class="col-6 center-align">
            <h1 class="">
                This is video parallax
            </h1>

            <p>
                The text color in this example is white. You can add here anything what you want: title, simple text, links, button or custom widget .
            </p>
            <br />
            <a class="popup-youtube link-outlined link-white weight-500" href="https://www.youtube.com/watch?v=hGCPj32plSU">Youtube video</a>
        </div>
    </div>
</div>
<!-- new tubular in Widget/HTML -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mb.YTPlayer/3.3.9/jquery.mb.YTPlayer.min.js"></script> 
<script type="text/javascript">


//<![CDATA[
     jQuery.noConflict();  
(function($) {  
// Init 
$(document).ready(function() {
// ytplayer
     $("#hs-video").YTPlayer();
});
})(jQuery); 
//]]>
</script>
<div id="hs-video" class="player" data-property=
"{videoURL:'https://www.youtube.com/watch?v=hGCPj32plSU',containment:'.video-hero',autoPlay:true, mute:true, startAt:0,useOnMobile:false,showControls:false, opacity:1}">
</div>

Add youtube url into 2 places: for fullwidth desktop video and the video in popup which is necessary for mobile devices.

The fullwidth video in mobile and tablet devices will be replaced by the image.

Please note that in case you're using more than one youtube parallax in one page, you need to change the class video-hero. Each parallax video should have a unique class!

Important notes!

Using this plugin, you'll need to setup the cookies.

Please log in to your website and in admin mode navigate:

Settings> Privacy & Security> Cookies> Create Cookies and add the following text:

YouTube Cookies - PREF, VISITOR_INFO1_LIVE, YSC

Description: these cookies are set by www.youtube.com. We use YouTube's Privacy Enhanced mode to embed video on our site which means that YouTube won't store information unless you play the video. Please refer to Google's Privacy Policies & Principles for more information.

Duration: PREF and VISITOR_INFO1_LIVE: up to 8 months

YSC: expires when you close your browser.

SUPPORT

  • Blog
  • Support center
  • Tutorials
  • Common Support issues
  • Updates

QUICK LINKS

  • Advanced Style Editor
  • Features
  • Pricing
  • Pre Purchase Questions
  • Marketplace
  • Zødiac Framework
  • Jimdo Creator

WIDGETS

  • Instagram feed
  • Team Showcase
  • Animations
  • Parallax widget
  • Full width widgets
  • Countdown Timer
  • All Widgets

GET INSPIRED

  • Showcase
  • Custom widgets
  • Enterprise Package
  • No coding features
  • Matrix variables
  • Dolphin Block Elements
hide-in-doc-page

Showcase
draggable-logo

 

Main colors
   bg-primary
   bg-primary-light
   bg-primary-dark
   bg-secondary
   bg-secondary-dark
Template sections
   body
   top-header
   header
   content
Footer Styles
   background
   text color
   link color
   horizontal line
Buttons
   style 1
   style 2
   style 3
Other elements
  social icons
  navigation color
  subnav background
Mobile navigation
   background color
   navigation color
Template configurations
has-center-nav g-font
navigation styles
size-15 weight-400 snip-nav is-uppercase --line01
content styles
form-white
footer styles
o-form  color-white
Typography
Heading H1
weight-600 is-uppercase
Heading H2
weight-600 is-uppercase
Heading H3
weight-600 is-uppercase
Buttons
weight-600 is-uppercase
Animations
none

Note:
All changes made here will be applied to your entire website.
is-switcher admin-only

MATRIX THEMES

STAND OUT WITH A PROFESSIONAL JIMDO WEBSITE

About | Privacy Policy | Cookie Policy | Sitemap
Copyright © 2022 All rights reserved
Log in Log out | Edit
  • Style Switcher
  • Common Issues
  • Installation
  • Guides
  • Blog
  • Updates
  • Marketplace
  • Scroll to top
Close