Help me use bigvideo.js in WordPress?

  • Resolved KeithAdv

    (@keithadv)


    11 years, 4 months ago

    I’m hoping someone can break this down so I can understand it!

    I’m fairly good with css, just a beginner on javascript and php. Not so well educated on when/how to include/import stuff. But I’d love to use the jquery bigvideo plugin on a site, if I can get over the tech part!

    Here is the BIGVIDEO.JS intro

    And here is a tutorial by the creator

    It’s the simple stuff I trip over–where and how to include what–I just don’t know how to WordPress-ify code like this! However, I’d love to get it up and running and all help would be appreciated! Thank you!

Viewing 7 replies - 1 through 7 (of 7 total)
  • Moderator bcworkz

    (@bcworkz)

    Since you are altering markup and CSS, you will want to create a child theme to protect your changes from theme updates. Figuring out which templates to alter can be confusing. Start by looking at header.php and index.php. The CSS goes on your child theme’s styles.css.

    The javascript can go in a .js file stored in a /js/ folder of your child theme. It may go elsewhere, but this format is used consistently by WP, you may as well adopt it. In order to have meta links in the page head section linking to your javascript files, do NOT hardcode the meta links in header.php. You must use wp_enqueue_script(), which will insert the meta links for you, as well as resolve any dependencies. The enqueue script code goes on your child theme’s functions.php file.

    Thread Starter KeithAdv

    (@keithadv)

    …, do NOT hardcode the meta links in header.php. You must use wp_enqueue_script(), which will insert the meta links for you, as well as resolve any dependencies. The enqueue script code goes on your child theme’s functions.php file.

    This. I needed to go get a very good understanding of wp_register_script and wp_enqueue_script process, which I did. Everything works now. Thank you very much!

    Hey guys, I’m trying to do the exact same thing and am failing miserably.

    @bcworkz – what do you mean when you say “figuring out which templates to alter can be confusing. Start by looking at header.php and index.php”?

    It’s too vague as I’m unsure what to do.

    When you download the Source code from the tutorial you’ll see that there are two css files (style.css and bigvideo.css), which one do I use?

    Any way of you doing a youtube tutorial Keith, I’ve been smashing my head on my laptop for about 4 hours :S

    Moderator bcworkz

    (@bcworkz)

    Hi jab8888 – I’m sorry you’re struggling with this. I’m a bit unsure what I was thinking 9 months ago, but I expect some sort of video <div> container and other HTML that needs to be added to the appropriate templates. Figuring out which template to actually place this HTML on is the challenge. Sometimes it’s easy, other times not.

    I believe there’s a plugin that aids you in doing this. I usually just add a HTML comment with the file name at the top of all likely candidates, then load the target page and examine the page source code. The comments show up nicely in the syntax highlighting of most browsers,telling you what templates are used where in any particular page.

    I would expect you would use both CSS files if the author took the trouble to make them available. Put these in a subfolder of your child theme because your theme already has a style.css file. Don’t confuse the two!

    The usual problem people run into when adapting generic tutorials to WP is instructions to place meta links, style, and script in a page’s <head> section cannot be followed exactly. WP inserts these sort of things for you once you’ve enqueued the files using wp_enqueue_script() and wp_enqueue_style(). These functions are called from within an action callback function you create that is hooked to ‘wp_enqueue_scripts’ with add_action(). This hook works for enqueuing styles as well. All of this code goes on your theme’s functions.php file.

    The trouble I usually have when setting this stuff up is getting the paths all correct. Checking the page source, access log, and Apache error log are useful in checking that all paths are correct.

    So at the moment I’m just trying to get the basics down, do you know how I can get rid of the “My great WordPress blog” header so it’s just a full-screen image? Also the image dimensions aren’t right but I’ve followed the tutorial perfectly.

    Any help would be amazing ??

    Here’s my code so far:

    index.php

    [ Moderator note: Code fixed, please wrap code in backticks or use the code button. ]

    <?php get_header(); ?>
<div id="main">

<div class="wrapper">
    <div class="screen" id="screen-1" data-video="vid/bird.mp4">
        <img src="https://www.stampthewax.com/advance/wp-content/uploads/2014/09/spider.jpg" class="big-image" />
        <h1 class="video-title">#1 Bird</h1>
    </div>
    <div class="screen" id="screen-2" data-video="vid/satellite.mp4">
        <img src="img/satellite.jpg" class="big-image" />
        <h1 class="video-title">#2 Satellite</h1>
    </div>
</div>

</div>
<?php get_footer(); ?>
</blockquote>
Header.php

<blockquote><html>
<head>
<?php wp_head(); ?>
</head>
<body>

<nav id="next-btn">
    <a href="#"></a>
</nav>

</body>

<div id="header">
</div>

</html>
</blockquote>
functions.php

<blockquote><?php

function stw_scripts() {

	wp_enqueue_script('jquery');

	wp_register_script( 'imagesloaded', get_template_directory_uri() . '/js/jquery.imagesloaded.min.js');

    wp_enqueue_script('imagesloaded');

    }

add_action( 'wp_enqueue_scripts', 'stw_scripts' );
</blockquote>
style.css

<blockquote>/*Theme Name: STW
Theme URI: www.stampthewax.com
Description: Advance
Version: 1.0
Author: Your name or www.remarpro.com's username
Author URI: www.stampthewax.com
Tags: Tags to locate your theme in the WordPress theme repository
*/

html, body {
    margin: 0;
    padding: 0;
    color: #fff;
    overflow: hidden;
    font-family: 'Open Sans Condensed', Arial, sans-serif;
    font-weight: 300;
    font-size: 1em;
}

.wrapper {
    position: absolute;
    width: 500%;
    height: 100%;
    z-index: 0;
}

.screen {
    position: relative;
    height: 100%;
    width: 50%; /*  NOTE:numVideos/100%  */
    float: left;
    overflow: hidden;
}

.big-image {
    min-width: 100%;
    min-height: 100%;
    height: auto;
    width: auto;
}

.video-title {
    position: absolute;
    bottom: 5%;
    left: 5%;
    opacity: .5;
    margin: 0;
    padding: 0;
    line-height: .65;
    font-size: 4em;
    text-transform: uppercase;
}

nav {
    position:absolute;
    right: 5%;
    top: 45%;
    padding: 20px;
    background: #000;
    border-radius: 40px;
    opacity: .4;
    cursor: pointer;}
    nav: hover {
    opacity: .6;
}

.next-icon {
    display: block;
    border-top: solid 2px #fff;
    border-right: solid 2px #fff;
    width: 20px;
    height: 20px;
    position: relative;
    left: -5px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    color: #fff;
    text-decoration: none;
}

#big-video-wrap{overflow:hidden;position:fixed;height:100%;width:100%;top:0;left:0;}
#big-video-vid,#big-video-image{position:absolute;}
#big-video-control-container{position:fixed;bottom:20px;padding: 0 20px;width:100%;
  -webkit-transition-duration:0.6s;-moz-transition-duration:0.6s;-ms-transition-duration:0.6s;-o-transition-duration:0.6s;transition-duration:0.6s;}
#big-video-control{width:100%;height:16px;position:relative;}
#big-video-control-middle{margin: 0 56px 0 24px;}
#big-video-control-bar{width:100%;height:16px;position:relative;cursor:pointer;}
#big-video-control-progress{position:absolute;top:7px;height:3px;width:0%;background:#fff;}
#big-video-control-track{position:absolute;top:8px;height:1px;width:100%;background:#fff;}
#big-video-control-bound-left{left:0;}
#big-video-control-bound-right{right:-1px}
#big-video-control-track .ui-slider-handle {opacity:0;}
#big-video-control-playhead{left:30%;}
#big-video-control-play{position:absolute;top:0;left:0;height:16px;width:16px;background-image:url('bigvideo.png');}
#big-video-control-timer{position:absolute;top:1px;right:0;color:#fff;font-size:11px;}
#big-video-control-playhead,#big-video-control-bound-left,#big-video-control-bound-right{position:absolute;top:0;height:16px;width:1px;background:#fff;}
#big-video-control .ui-slider-handle{border-left:solid 1px #fff; width:16px;height:16px;position:absolute;top:-8px;}
.transparent{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;}
.vjs-big-play-button{display:none !important;}
    Moderator bcworkz

    (@bcworkz)

    Hi jab8888, sorry for the late reply, I’m having connectivity issues this week.

    It sounds like your remaining issues are all CSS related. If you could provide a live link to the page you are having issues with, I could possibly make more specific suggestions. It’s nearly impossible to trouble shoot CSS issues without a live link. Also explain what you want the image dimensions to be.

    Or you could just do what I would do, use your browser’s CSS analysis tool to identify the correct selectors and try different styles until one is found that works. Most browsers have this tool built in under “developer tools” or similar sounding menu picks. If you use Firefox, install the Firebug add-on for this functionality.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Help me use bigvideo.js in WordPress?’ is closed to new replies.