1. 

   wcamp
   

   offline

   Member

   Hello:

   I've completed my efforts at replacing a defective JavaScript "tooltip" feature with a very functional and reliable PVII product: Pop Box Magic (PBX). All twenty-six pages on my "John's Three Epistles" site have been updated; the text tooltips look good and work well. Thank you, Gerry and Sinclair, for your guidance at getting started with such implementation.

   To some of these twenty-six pages, I'd like to add a video popup that's complemented by PBX's styling.

   Looking at the page source on PVII's "PBX Examples" page and copying parts of it, I took a stab at creating my first PBX-video instance, without instruction. It appears to work as it should, but the user guide doesn't suggest how to set up and format a PBX-video instance, so I'd like your feedback.

   The PBX-video trigger text, found one-third down the page, is titled, "This 'St. John in Exile' video presents . . ." It opens when hovered or tapped:

         https://www.warrencampdesign.com/johnsEpistles/part1/week8.php

   Are there parameters that users should follow when creating a PBX-video instance?

   Wondering Warren

   Posted 9 months ago
2. 

   Gerry
   

   offline

   PVII Team

   Hi Warren,

   The PBX video popup looks great. There are really not any special styling or settings for video slides in PBX, it's treated just as any other content slide in PBX. Simply assigning the '.pbx-video-wrapper' class gets the PBX system to takes care of the video handling and presentation automatically.

   Posted 9 months ago
3. 

   wcamp
   

   offline

   Member

   Thanks, Gerry, for your encouraging e-reply. Knowing that I've entered appropriate markup for PBX-related video instances on my "John's Three Epistles" site, I've begun to add PBX-related videos to my next site: "The Book of Acts."

   I have three preliminary questions to ask.

   1.  Because I'll add a video instance to nearly all forty-eight "Acts" pages, and because I want each "iframe video" to have a maximum width to be set to 900px, how might I change my "p7PBX-01.exceptions.css" stylesheet to reset the default PBX UI so that "900" is the max-width parameter, not the usual "600" value?

   2.  On the following page, when the PBX trigger is hovered, the video appears, as intended, as a 900-px-wide pane. The opening video image fills the PBX video pane as expected. But when the video starts, it doesn't fill the width of the PBX video pane; there's a stark black background on each side of the video, which I find distracting. Is there a way to make the video fill the PBX pane (or vice versa)?

   The video trigger is toward the bottom of the page, beneath "This Week's Passage."
       https://www.warrencampdesign.com/acts/part1/week2.php

   3. This next question might be a Dreamweaver question. Why does the dotted underline styling of each PBX "text" trigger appear as expected, while no underline appears for a PBX "video" trigger, when viewing the page using DW's "Split" view? (Note: The dotted underline does appear with Safari.) This happens on my "week38.php" page.
       https://www.warrencampdesign.com/acts/part3/week38.php

   You can see this DW Split-view occurrence in my screenshot:
       https://www.warrencampdesign.com/acts/images/screenshot-PBX.jpg

   Thanks, in advance, Gerry, for helping me by answering these three preliminary questions.

   Warren

    

   Posted 8 months ago
4. 

   Gerry
   

   offline

   PVII Team

   Hi Warren,

   1. For the max width, you would normally just set this in the PBX user interface for that instance, just change the default 600 to 900 in the 'Max Width' box. You do not want to do this via the style sheet.

   2. You video source is actually the older 4:5 aspect ratio. Our supplied .pbx-video-wrapper code sets the box for modern 16:9 format.

   Add this style rule to your style sheet:

   .video-45box-wrapper {
   padding-bottom: 75% !important;
   padding-top: 0px !important;
   }

   This will define the box for 5:4 dimensions.

   Assign this class to each instance of PBX that will show 5:4 aspect ratio videos, the PBX div wuld look like this:

   <div class="pbx-video-wrapper video-45box-wrapper">

   3. The Design View rendering of the dotted border is, of course, a DW Design View anomaly. It does this in both DW 2020 as well as CS6. I've stopped pondering these anomalies a long time ago, just learned to live with them as long as the browser rendering is fine.

   Posted 8 months ago
5. 

   wcamp
   

   offline

   Member

   I thank you, Gerry, for clearly answering all three of my PBX video questions. Your answers to questions 1 and 3 are straightforward and I've made note of them.

   Your answer to question 2, relates to getting the iframe video to fill the pbx-video-wrapper box. Having added that suggested rule to my spreadsheet, the PBX-video works very well now that I've also assigned that declaration to each PBX-video instance, as shown on my two updated pages:
     https://www.warrencampdesign.com/johnsEpistles/part1/week8.php
     https://www.warrencampdesign.com/acts/part1/week2.php

   However, a different video on the following page doesn't fill the box, no matter my assigning to your suggested <div class="pbx-video-wrapper video-45box-wrapper">:
   https://www.warrencampdesign.com/johnsEpistles/part2/week14.php

   That page's PBX-video is in the twelfth paragraph; when the video runs, there are top and bottom black spaces.

   Does that video come in a typical or atypical aspect ratio? How might I/we determine the aspect ratio of a video? Once we learn that, how do we style the video appropriately?

   Finally, is there a collection of adaptive video-box wrapper rules, like the one you suggested above, from which to choose and apply to a variety of videos so that they fill their video box?

   Wondering Warren

   Posted 8 months ago
6. 

   Gerry
   

   offline

   PVII Team

   Aspect Ratio

   The aspect ratio of a video is calculated by dividing its natural height by its natural width. The resulting ratio, in decimal format is used to set top padding on the wrapper. The height and width of your video will be found in the embed code:

   <iframe width="560" height="315" src.......

   Divide the height by the width to get the ratio. 315 / 560 = .5625

   This ratio is used to assign top padding to the wrapper. By default, we use .5625, which translates to 56.25%. If your video has a different aspect ratio, calculate it and use the result to edit the padding-bottom value.

   For the video you have, the default value should work, however, the PBX video-wrapper style rule inlcudes a top-padding value of 30px. This is an older value we used to use to accommodate YouTube's toolbar. This is no longer necessary so the value should be changed to 0px.

   In your p7PBX-01.cs style sheet, look for the video-wrapper rule at line 226:

   .pbx-video-wrapper {
   position: relative;
   padding-bottom: 56.25%;
   padding-top: 30px;
   height: 0px;
   overflow: hidden;
   margin: 0px !important;
   }

   Change the padding-top value from 30px to 0px. Save and close the style sheet.

   That should remove the top and bottom space.

   Posted 8 months ago
7. 

   wcamp
   

   offline

   Member

   I appreciate your explanation, Gerry, as well as the suggested rule modification. Having reduced the "padding-top" value of that wrapper to "0" works very well on my "week14.php" page, linked above. Thanks very much.

   I've made that "padding-top: 0;" change to each of my sites that now use PBX. I've also copied your comment so I can refer to it when working with video aspect ratios on my sites that don't use PBX.

   But I've got a follow-up question to ask you.

   I've added both of your above-provided rules to a new site that I developed over the last few days. There are numerous PBX video instances; each opens by clicking. Although all the videos have the same <iframe width="560" height="315" src=..." aspect ratio, and although I've assigned the <div class="pbx-video-wrapper video-45box-wrapper"> declaration to them, unfortunately, these videos have large empty spaces at their top and bottom. I must have made a mistake somewhere but cannot locate it. Would you please inspect my page and style sheets to see what I mistakenly entered?

   https://www.warrencampdesign.com/matthew/matthew-visualbible1.html

   Thanks so much, Gerry.

   Warren

   Posted 8 months ago
8. 

   Gerry
   

   offline

   PVII Team

   That appears to be just how the video is setup on You Tube. If you click the YouTube link on the video control bar you'll see the video open on YouTube's site. It has the same top and bottom black space. There is nothing we can do about that.

   Posted 8 months ago
9. 

   wcamp
   

   offline

   Member

   I'm relieved to learn the cause of the empty, top-and-bottom black spaces on each PBX video instance. I'd triple-checked the style sheets' entries and my page's markup but I couldn't find my error. Thanks for teaching me the importance of "checking the source" for its condition.

   Now that that issue has been resolved, I'd like to know if there's a limit to the number of PBX-video instances on a page. I ask because I'd divided my "matthew-visualbible" page into these two smaller pages, each ±60 kb in size.
   https://www.warrencampdesign.com/matthew/matthew-visualbible1.html
   https://www.warrencampdesign.com/matthew/matthew-visualbible2.html

   Both pages are slow to open, just as each PBX-video is slow to start when clicked. When working on Safari, I get this warning message atop the screen:
   "* This webpage is using significant memory. Closing it may improve the responsiveness of your Mac."

   Assuming that there's not a limit to the number of PBX-video instances on a page, I presume that there's a limit to the number of YouTube <href>s and their related Youtube JS files for each of its videos. Yes?

   Would you kindly suggest how I should respond to this "significant memory usage" warning?

   Q. 1.  Would dividing the two <href>-heavy pages into four pages be sufficient? Perhaps six pages?

   Q. 2.  Would reducing the number of <href>s in the right column (which are not PBX-related links) also be a measurable improvement?

   Q. 3.  Might you have an additional suggestion that I can follow to increase the opening speed of my two (or more) matthew-visualbible" pages?

   I look forward to learning these answers from you Gerry. Much appreciated!

   Warren

   Posted 8 months ago
10. 

    Gerry
    

    offline

    PVII Team

    There is no 'technical[' limit to the number of PBX instances that contain YouTube embed videos there is the practical limit of page load times. The YouTube embed code will fire for each instance, and each YouTube instance will take approx 300-500ms to run. This adds up quickly when you have 11 or so instances on the page, 3 to 5 seconds.... which is unacceptable.

    It's not the hrefs that are causing the slow load issue, it's the number of YouTube <iframe> instances, they each cost 300 to 500ms.

    Use the 300ms per instance to decide what load delay is practical for your pages and break them down accordingly.

    Posted 8 months ago
11. 

    wcamp
    

    offline

    Member

    Thanks for advising me of these facts, Gerry. As a result, I've compartmentalized my two iframe-heavy pages, not into 4 or 6 pages, but 14 pages, which is excessive.

    Nevertheless, I'd like your help going forward. On this new page, . . .
    https://www.warrencampdesign.com/matthew/matthew-visualbible3.html
    . . . I now have only two PBX-video links directed to a YouTube iframe file. Sadly, when I test the new page's speed on GTMETRIX, it gets a "D (68%), 2.9 seconds time to fully load the page" failing result!

    Is there some way to have as few as two YouTube iframe file links on a page without slowing the page-load time significantly?

    Otherwise, while still utilizing PBX and its Lightbox styling capability, can I effectively use a YouTube <href> insert instead of an <iframe> insert?

    What do you suggest I do to enable PBX and Lightbox for this pair of YouTube videos without slowing the page-load speed?

    I eagerly await your next recommendation, Gerry. I've no idea what might be available to [us]. I thank you in advance.

    Warren

    Posted 8 months ago
12. 

    Gerry
    

    offline

    PVII Team

    The only way to avoid the page load impact of the YouTube <iframes> is to defer the running of the YouTube scripts until needed. I put together a 'defer YouTube' work around for PBX. Here's how it works:

    1. Change the src attribute to data-src on all of your YouTube <iframe>s, for example this:

    <iframe width="560" height="315" src="https://www.youtube.com/embe......

    would be changed to this:

    <iframe width="560" height="315" data-src="https://www.youtube.com/embe......

    Save the page.

    2. Open the p7PBXscirpts.js file, locate the P7_PBXframes(a, ac) function at line 686and rename (append _old) it to:

    P7_PBXframes_old(a, ac

    3. Copy and paste this revised code into the blank line 685:

    function P7_PBXframes(a, ac){
    var i, tD,att;
    if (a && a.pbxFrames && a.pbxFrames.length) {
    for (i = 0; i < a.pbxFrames.length; i++) {
    att = a.pbxFrames[i].getAttribute('data-src');
    if (ac == 'on') {
    if(att && att !== ''){
    a.pbxFrames[i].src = att;
    }else{
    a.pbxFrames[i].src = a.pbxFrames[i].pbxSrc;
    }
    } else {
    a.pbxFrames[i].src = '';
    }
    }
    }
    }

    4. Save and close the file.

    This will now defer assigning the src attribute to the <iframe> until the PBX popup is opened by the user. The result is that there will now be no page load impact due to the YouTube scripts. it should load quicker. You will also be able to place all of them on the same page without any impact on page load speed.

    Hopefully it will work for you :-)

    Posted 8 months ago
13. 

    wcamp
    

    offline

    Member

    Many thanks, Gerry!

    I've never worked on a JS file. Hopefully, I'll be able to carefully make the adjustments correctly.

    I'll work on this over the weekend.

    Thanks again, very much.

    Warren

    Posted 8 months ago
14. 

    Gerry
    

    offline

    PVII Team

    If your apprehensive about editing the script file I can just send you the modified version of the file. Let me know.

    Posted 8 months ago
15. 

    wcamp
    

    offline

    Member

    Well, my first engagement with modifying a JS file appears to have been an error-free one. I've tested the uploaded "matthew-visualbible3.html" page on GTmetrix and got very encouraging results, compared to yesterday's. Instead of getting a "D (68%), 2.9 seconds time to fully load the page" failing result, I received a "B (83%), 1.6 seconds to fully load page" result.

    I verrrry much appreciate your knowhow and continued support, Gerry. It means a lot when I see your follow-up efforts to assist [us].

    Three follow-up questions, if I may.

    1. Dreamweaver indicates that your JS file has a few errors in this revised file. I saw them before I did the copy/paste exercise.
    (a) Line 686 says: "ERROR: 'tD' is defined but never used. [no-unused-vars]"
    (b) line 702 says: "ERROR: 'P7_PBXframes_old' is defined but never used. [no-unused-vars]"
    (c) line 703 says: "ERROR: 'tD' is defined but never used. [no-unused-vars]"
    . . . Elsewhere there are other "defined but never used" error messages. Shall I presume that they don't concern you at this point?

    2. I'll start restructuring my fourteen compartmentalized pages into [perhaps] four easy-to-navigate pages, checking the page load speeds as I go. What optimal page speed (using GTmetrix) should be the limit for my pages? What would be too slow?

    3. Might there be something else on my "matthew-visualbible-3.html" page that I could change or delete to improve the "B (83%)" grade? Or should I be pleased with that grade on my pages?

    Wondering Warren

    Posted 8 months ago
16. 

    Gerry
    

    offline

    PVII Team

    1. It's safe to ignore those warnings, they do not affect the performance of the PBX system. Just a matter of 'strict' linting rules in current versions of DW.

    2. With the YouTube defer work around modification now on the page it really should not matter how many YouTube embeds you place on the page. What remains is just the normal page assets, a B score is quite acceptable for pages with quite a bit of content.

    3. Keep in mind that all of your images and linked assets will affect this score, there really is nothing on the page that can be further tweaked for speed.

    Posted 8 months ago
17. 

    wcamp
    

    offline

    Member

    Hello, again, Gerry:

    I'm glad to find your answers to my three questions. I'm especially relieved with your answer to Question 2, that it shouldn't matter how many YouTube embeds I place on a page, so long as I utilize your PBX "YouTube defer" rule.

    I have a concern, now that I've incorporated all of my compartmentalized pages into only two new pages.

    https://www.warrencampdesign.com/matthew/matthew-visualbible1.html

    https://www.warrencampdesign.com/matthew/matthew-visualbible2.html

    I've not added anything new to either page. However, both pages now get a lower GTmetrix grade. Each gets a "C (70%), 2.7 seconds to load" grade, instead of the previous "B (83%), 1.6 seconds to load" grade.

    Today I've made concerted efforts to verify that I didn't miss adding "data-" to the "src" element of each iframe entry. Might I have copy/pasted something inappropriately on both pages, or on the stylesheet, to have now caused a slower page-load speed?

    Sorry. . .

    Posted 8 months ago
18. 

    Gerry
    

    offline

    PVII Team

    Looks like you do have some YouTube videos that are not part f the PBX defer solution, they are normal YouTube embeds in the LBM content divs. For example, on your first page, at line 161:

    <iframe width="560" height="315" src="https://www.yout......

    every YouTube embed is going to cost at around a second or so in load time(it's actually a separate page loading into the browser), if you use the PBX defer work around then they will not consume any load time.

    Posted 8 months ago
19. 

    wcamp
    

    offline

    Member

    Yes. I didn't utilize the "YouTube defer" effect on that video on line 161. To improve the page-load speed, I should have done that.

    But it had previously been implemented using these classes from LBM: "lbm-video-wrapper" "lbm-frame-border" "lbm-frame-rnd." Its video preview window showed nicely as I'd wanted. But when I attempted to apply the YouTube defer effect to that video, its preview window disappeared. It remains empty.

    I'm afraid that I don't know which div classes to assign that video to (1) keep the video's preview window appearing while (2) utilizing the YouTube defer solution that you engineered.

    Currently, here's its markup.
    . . .
    <div class="centeredMax500">
    <div class="lbm-video-wrapper lbm-frame-border lbm-frame-rnd pbx-video-wrapper video-45box-wrapper">
    <iframe width="560" height="315" data-src="https://www.youtube.com/embed/3dEh25pduQ8?rel=0" allowfullscreen> </iframe>
    </div>
    <p class="caption"> An animated video from <a href="https://www.youtube.com/channel/UCVfwlh9XpX2Y_tQfjeln9QA" target="_blank" title="Watch this short, informative video about Matthew's gospel, compliments of The Bible Project.">The Bible Project</a></p>
    </div>
    <br>
    . . .

    Kindly tell me the correct div classes to enter for this unique iframe video that appears at the bottom of the left margin.

    Thanks very much, Gerry.

    Warren

    Posted 8 months ago
20. 

    Gerry
    

    offline

    PVII Team

    Hi Warren,

    You cannot use the PBX defer workaround on a video that is not inside a PBX popup. It will not work for a YouTube video that is embedded normally into the page. The PBX defer work around involves removing the src attribute of the <iframe> so that there is no link to YouTube (the src attribute is renamed to data-src so there really is no actual src attribute). The modified PBX scripts will then assign the src attribute just before the pop box is opened, and then removes the src attribute when the pop up is closed.

    That's all by way of saying that the normal embed, where the video is visible on the page, needs the src attirbute to YouTube in order to build the <iframe> and video. There is no way around this, you would think that YouTube of sites, would assign the 'defer' attribute on their YouTube scripts.

    Posted 8 months ago
21. 

    wcamp
    

    offline

    Member

    I understand.

    So long as I include that one embedded iframe, which doesn't use a 'defer' attribute, the page must open slower. Yes?

    That said, may I ask if a "C (73%), 2.7 seconds to load" score on GTmetrix is acceptable on the Web? Or do you suggest that I consider omitting that sole non-deferred video so that the page with several deferred videos will be faster and get a "B (80%), 1.6 seconds to load" score?

    Warren

    Posted 8 months ago
22. 

    Gerry
    

    offline

    PVII Team

    For me your page loads fine, certainly quick enough. The speed measurements can be used as a helpful guide to solve critical loading issues your page may have. Your page's current load speed is very acceptable and outside of removing important content There is not much else to do. I would not remove the embedded video just to achieve a higher numerical score, maybe a half f a second in the real world; not worth worrying about.

    Posted 8 months ago
23. 

    wcamp
    

    offline

    Member

    Excellent to hear your opinion, Gerry. I'll leave the embedded video on the page.    (  ; - )

    I appreciate your advisories and assistance very much.

    Warren
    ______

    Posted 8 months ago

RSS feed for this topic

Reply

You must log in to post.