1. 

   savio
   

   offline

   Member

   Hello, I have a site made with Harmony and Video Background Magic, though by a bit of an odd way (Al [RIP] and I went back and forth on making this design "work" even though it really shouldn't - it is a background video with a "cover" background image over it so the "Smoke" appears to be in the screen).

   On the video gallery page, I am using a responsive video player. I was able to adjust the container to 50% to fit the screen, but for some reason on this page a right scroll appears. How do I prevent that so it works like the other pages?

   For some reason, it seems like div#p7HMY_2.p7HMY is being pushed to the right and extended compared to other pages.

   I can't seem to find the css that is causing that!

   Thanks so much!
   https://darrylcharlesmagic.com/videos.php

   Posted 3 months ago
2. 

   Gerry
   

   offline

   PVII Team

   There is a fixed width assigned to the 'mlvp-list' divs in the video player by the video player scripts. This is what is causing the scrollbar.

   -This may be fixed by turning on the 'Overflow Hidden' option for that section in the Harmony interface.

   -You may need to add these style rules to force the width:

   .mlvp-list {
   max-width: 100% !important;
   width: 100% !important;
   }

   div.player-container {
   width: 100% !important;
   }

   Posted 3 months ago
3. 

   savio
   

   offline

   Member

   Thanks so much! When I tried the "overflow hidden" it actually caused the entire video gallery to disappear (see https://darrylcharlesmagic.com/videos3.php).

   I did try adding those two rules - that actually works really well - it causes all the videos to show, so I just hid the arrows (https://darrylcharlesmagic.com/videos.php). However the mobile view is pretty bad with this option. Would there be a different media query to use with this option to make the mobile view work?

   I appreciate your help/advice!

   Posted 3 months ago
4. 

   Gerry
   

   offline

   PVII Team

   Try adding this media style rule to over-rule the max-width: 60% on the HMY element:

   @media only screen and (min-width: 0px) and (max-width: 768px) {
   #p7HMY_2 {max-width: 100% !important;}
   }

   Posted 3 months ago
5. 

   savio
   

   offline

   Member

   Thanks so much - that did work! Of course, then client wanted a "tabbed" effect that the photo gallery for the video, so I was able to use OmniPanel Magic and add the playlist divs to the panels :)

   Seems to work out well!

   Thanks so much for your help!

   Posted 3 months ago
6. 

   savio
   

   offline

   Member

   So close to this being perfect - but one odd thing is happening I am guessing due to the resizing. Videos that are on the second or third line are playing the videos on the top line when clicked...would something in the new code cause this to happen? It is also causing a single video to be on a line by itself, which is odd and perhaps part of the issue?

   Posted 3 months ago
7. 

   savio
   

   offline

   Member

   It seems that this might be stemming from some type of container that is used for the videos - but I can't seem to pinpoint it.

   Posted 2 months ago
8. 

   Gerry
   

   offline

   PVII Team

   The video script you are using is assigning absolute positions to the video thumbnails, bu the thumbnail container is not set to position: relative so all of the thumb trigger links are being positioned relative to the main container.

   Add this style rule to fix the issue:

   .vid-item {
   position: relative;
   }

   Posted 2 months ago
9. 

   savio
   

   offline

   Member

   Thank you SO much! that did fix the thumbnail issue! One other follow up (sorry as I know this isn't your script, but truly appreciate your insight!). It seems some of the thumbnails are "skipping a line" and not all appearing in the rows (there are "empty spaces"). Do you happen to have any insight why this is happening? Thank you so much for any insight you may have!

   Posted 2 months ago
10. 

    Gerry
    

    offline

    PVII Team

    The thumbs are floated left, some of the descriptions are two lines of text. You can fix the issue by assigning a height to the descriptions so that they are all equal.

    Add this style rule:

    .vid-item .desc {
    height: 40px;
    }

    Posted 2 months ago
11. 

    savio
    

    offline

    Member

    ah that did work! Thank you SO much Gerry for your help!

    Posted 2 months ago
12. 

    Gerry
    

    offline

    PVII Team

    You're welcome Savio!

    Posted 2 months ago

RSS feed for this topic

Reply

You must log in to post.