WordPress.org

Ready to get started?Download WordPress

Forums

mb.YTPlayer for background videos
Adding Multiple Videos to a One Page WordPress Theme (3 posts)

  1. Eminence Entertainment
    Member
    Posted 9 months ago #

    Hello - on our site http://www.e3demo.com - we have successfully gotten the area known by the theme author as the Homepage Slider to display the video (and it looks great thank you for this terrific plugin).

    Our question is that there are various "Homepage Sections" they are called that make up this one page wordpress theme - i have tried embedding video backgrounds using numerous methods outlined in your documentation, wiki, and the shortcode generator found in the edit post screen - but unfortunately nothing adds the video.

    Also, we were toying with the idea of having each of the three Homepage Slides having a different video. After numerous attempts, unfortunately, the same (Slide 1) video of the sunset just plays for them all. Is there anyway to add videos to these areas of this one page theme?

    Thanks!

    AD

    http://wordpress.org/extend/plugins/wpmbytplayer/

  2. pupunzi
    Member
    Plugin Author

    Posted 9 months ago #

    Hi,
    You can't have multiple background videos on a single page with the wordPress plug-in; but you can set the video background on a DOM element as described here: https://github.com/pupunzi/jquery.mb.YTPlayer/wiki#using-jquerymbytplayer

    Adding the short-code by hand and giving a class "movie" to the player DIV descriptor.

    Bye,
    Matteo

  3. Eminence Entertainment
    Member
    Posted 9 months ago #

    Hello - thank you for the response. I will definitely look into this. Another question please - The plugin as it is setup currently on http://www.e3ngage.com for some reason breaks the parallax "image drag" effect of our teaser homepage sections. It works totally fine in Firefox and IE, but the images disappear in Chrome and Safari. For example, at one point we added:

    div#process #teaser-process div.info-container { background: url(http://www.e3ngage.com/wp-content/uploads/2013/06/E3-Pittsburgh-Marketing1.png); background-position: 50%; !important; }

    To the CSS and this made everything work in that section. We then repeated the process for all the sections:

    div#process #teaser-process div.info-container { background: url(http://www.e3ngage.com/wp-content/uploads/2013/06/E3-Pittsburgh-Marketing1.png); background-position: 50%; !important; }

    div#portfolio #teaser-portfolio div.info-container { background: url(http://www.e3ngage.com/wp-content/uploads/2013/03/E3-Video-Web.png); background-position: 50%; !important; }

    div#about #teaser-about div.info-container { background: url(http://www.e3ngage.com/wp-content/uploads/2013/03/E3-Marketing-Pittsburgh-2-large.png); background-position: 50%; !important; }

    div#contact #teaser-contact div.info-container { background: url(http://www.e3ngage.com/wp-content/uploads/2013/03/Pittsburgh-Media-Company.png); background-position: 50%; !important; }

    Then we realized that by doing this, while the images were now showing up, they had lost the parallax "image drag" effect and the cool overlay texture pattern, as can be seen in the demo:

    http://demo.udthemes.com/ego/wordpress/

    I then tried to add background-attachment: fixed !important; to the code, like this:

    div#process #teaser-process div.info-container { background: url(http://www.e3ngage.com/wp-content/uploads/2013/06/E3-Pittsburgh-Marketing1.png); background-position: 50%; background-attachment: fixed; !important; }

    Strange enough, the exact same problem we have initially was happening again. For some reason, adding that parallax drag effect, ie. "background-attachment: fixed;" causes the images to disappear in those sections in ONLY chrome and safari, but works perfectly still in Firefox and IE.

    Is there something I am missing? Is there something else we could try? Im really frustrated because I feel like we are so close but so far. Another developer mentioned that we should "take out the new !important CSS code we added and reduce the z-axis value for the full screen video" - but unfortunately i did not know what this meant.

    Thank you for any help you could provide.

    Best,

    Adrian

Reply

You must log in to post.

About this Plugin

About this Topic

Tags

No tags yet.