test
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • Pankaj Sharma Moderator
    #1054442

    Hi on the video player there is padding present that is showing as a blank space bar
    Open
    /templates/ja_mood/css/themes/red/template.css

    Find

    .embed-responsive-16by9 {
        padding-bottom: 56.25%;
    }

    Replace it with

    .embed-responsive-16by9 {
        padding-bottom: 46.25%;
    }

    save and check.
    For the article image, the image use the 100% width of the container and resized according to the container size. So if the container size is big, it will use the full width of image.

    Regards

    rwlfr Friend
    #1054539

    thanks for the 46.25% information. It seems to work fine.

    I don’t understand the 2nd part of your post, about the container size. What can I change to see the full width ? (in fact it’s more the full height which need to be used).

    • This reply was modified 7 years, 4 months ago by  rwlfr.
    Pankaj Sharma Moderator
    #1054601
    This reply has been marked as private.
    rwlfr Friend
    #1054625
    This reply has been marked as private.
    Pankaj Sharma Moderator
    #1054664

    Hi
    You can change it from the article manager.
    Here : http://prntscr.com/g67qii

    Regards

    rwlfr Friend
    #1054791

    I think you don’t understand the issue.
    Let me show you another example :

    On this link, the top of the head is cut :
    https://www.robbiewilliamslive.com/news/videos-blog/990-vloggie-williams-episode-4-1-titre-inedit

    But the image used is this one :
    https://www.robbiewilliamslive.com/images/stories/videos/17vloggiewilliams4.jpg

    On the image used, the top of the head is not cut.

    How can I keep the real size of the Full Article image ?

    Thanks

    Pankaj Sharma Moderator
    #1054839

    Hi
    The height is set to auto and it fit the container size with respect to width and height. if you will make remove the style it will show the full image but in that case, the image will be the stretch
    Open /templates/ja_mood/css/themes/red/template.css
    find and remove this code to check

    .embed-responsive img.embed-responsive-item {
        height: auto !important;
        -webkit-transform: translate(0px,-25%);
        -ms-transform: translate(0px,-25%);
        -o-transform: translate(0px,-25%);
        transform: translate(0px,-25%);
    }

    Regards

    rwlfr Friend
    #1056002

    Thanks. I tried this code, but in this case the image is streched, yes.

    There is no way to keep the proportions, and without cropping the height ?

    Pankaj Sharma Moderator
    #1056071

    Hi
    You can set the height as 100%, its shows the full height, there is no such way because it use the 100% width at this time.

    Regards

    rwlfr Friend
    #1056125

    Ok.
    I finally replaced this code :

    .embed-responsive .embed-responsive-item,
    .embed-responsive iframe,
    .embed-responsive embed,
    .embed-responsive object,
    .embed-responsive video {
      border: 0 none;
      bottom: 0;
      height: 100%;
      left: 0;
      position: absolute;
      top: 0;
      width: 100%;
    }
    .embed-responsive img.embed-responsive-item {
      height: auto !important;
      -webkit-transform: translate(0px, -25%);
      -ms-transform: translate(0px, -25%);
      -o-transform: translate(0px, -25%);
      transform: translate(0px, -25%);
    }
    .embed-responsive {
      display: block;
      height: 0;
      overflow: hidden;
      padding: 0;
      position: relative;
    }
    .embed-responsive-16by9 {
      padding-bottom: 56.25%;
    }
    

    by this code :

    .embed-responsive .embed-responsive-item,
    .embed-responsive iframe,
    .embed-responsive embed,
    .embed-responsive object,
    .embed-responsive video {
      border: 0 none;
      bottom: 0;
      height: 100%;
      width: 100%;
      left: 0;
      position: absolute;
      top: 0;
      width: 0;
    }
    .embed-responsive img.embed-responsive-item {
            height: 100% !important;
            width: 100% !important;
    }
    .embed-responsive {
      display: block;
      height: 0;
      overflow: hidden;
      padding: 0;
      position: relative;
    }
    .embed-responsive-16by9 {
      padding-bottom: 62.50%;
    }
    

    And it seems working fine.

    Pankaj Sharma Moderator
    #1056155

    Great setting 100% width looks working fine.
    Thanks for sharing 🙂

    Regards

Viewing 11 posts - 1 through 11 (of 11 total)

This topic contains 11 replies, has 2 voices, and was last updated by  Pankaj Sharma 7 years, 4 months ago.

The topic ‘Issues with the Video Mask on Video Item page’ is closed to new replies.