[Resolved] Add FitVids to GeneratePress for responsive videos

Home Forums Support [Resolved] Add FitVids to GeneratePress for responsive videos

Home Forums Support Add FitVids to GeneratePress for responsive videos

Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #197737
    Dennis

    Hi Tom,

    I’m wondering if you can add FitVids.js to GeneratePress, so that embedded youtube and vimeo videos are responsive on mobile devices when using iframe/embed code. At the moment videos don’t look great on mobile or tables as they are long and rectagular.

    If you are unable to add this, can you tell me how I can add it to a child theme so videos are responsive.

    Thanks

    #197841
    Tom
    Lead Developer
    Lead Developer

    It should be quite easy to add if you have a child theme.

    First, upload jquery.fitvids.js into your child theme.

    Then add this as a function:

    add_action( 'wp_enqueue_scripts', 'generate_fitvids' );
    function generate_fitvids() 
    {
        wp_enqueue_script( 'fitvids', get_stylesheet_directory_uri() . "/jquery.fitvids.js", array( 'jquery' ), '1.0', true );
    }

    Then you could add this into the wp_footer hook in GP Hooks:

    <script>
      jQuery(document).ready(function($){
        // Target your .container, .wrapper, .post, etc.
        $("#thing-with-videos").fitVids();
      });
    </script>
    • This reply was modified 5 years, 2 months ago by Tom.
    #198681
    Dennis

    Great. Thanks Tom

    #198696
    Tom
    Lead Developer
    Lead Developer
    #200255
    jordi

    Hello Tom
    1 jquery.fitvids.js want to upload the plugin on the main theme for the videos have correct proportions, I went to https://github.com/davatron5000/FitVids.js page to download the plugin but can not find,

    2 file
    add_action ( ”, ‘wp_enqueue_scripts generate_fitvids’);
    generate_fitvids function ()
    {
         wp_enqueue_script (” fitvids get_stylesheet_directory_uri () “,” /jquery.fitvids.js array ( ‘jquery’), ‘1.0’ is true.);
    }

    you have to upload it to generate press functions.php?

    I take hours and do not fix it, thanks for your tremendous help

    Jordi

    #200315
    Tom
    Lead Developer
    Lead Developer

    This is the file you want to save: https://raw.githubusercontent.com/davatron5000/FitVids.js/master/jquery.fitvids.js

    Then upload it to your child theme.

    Add this function to the functions.php file in your child theme:
    
    add_action( 'wp_enqueue_scripts', 'generate_fitvids' );
    function generate_fitvids() 
    {
        wp_enqueue_script( 'fitvids', get_stylesheet_directory_uri() . "/jquery.fitvids.js", array( 'jquery' ), '1.0', true );
    }

    This assumes you uploaded the file as jquery.fitvids.js and uploaded it to the root directory of your child theme.

    Then add this in the wp_footer link in GP Hooks:

    <script>
      jQuery(document).ready(function($){
        // Target your .container, .wrapper, .post, etc.
        $("#thing-with-videos").fitVids();
      });
    </script>
    #200343
    jordi

    Hi Tom, for I have made changes directly in the main thema and has not worked for me, now also on the menu created with max mega menu submenus are not

    I do not have child theme, as I create a child theme?

    as anulo the wp_footer?

    Thank you

    #200351
    jordi

    Hello again Tom,

    I have restored all that was done in the parent topic, I download in this forum the child theme that only has a file named style, the function file and a screenshot, is that correct?

    another thing, when I think the hat wp_footer check the box Execute php ??

    Thank you

    #200355
    Tom
    Lead Developer
    Lead Developer

    That’s correct.

    No need to execute PHP with that code 🙂

    #200368
    jordi

    Hello again Tom

    first thank you for the patience you have to answer all questions

    We will improve the look of the web,

    Attached two images

    http://www90.zippyshare.com/v/9RB24qoA/file.html

    http://www103.zippyshare.com/v/sti523eL/file.html

    post image in category is shown as the video image, that image is provided but it is that image in the post is very small, image post direct, do not know if this can be arranged a little more.

    on the other hand the title of the post if you change the zoom ratio according to the browser, you can not do the same cos titles that do not change in size?

    Finally, in the post in category image, seen above the title of the category, where I can change the color, size and font? already that the titles of the post is in H2 but can not find for the title of the categories.

    Thank you

    Jordi
    Traductor de Google para empresas:Google Translator ToolkitTraductor de sitios webGlobal Market Finder

    #200427
    Tom
    Lead Developer
    Lead Developer

    Hmm, I’m afraid I’m not sure what you mean – maybe you can add arrows to the elements you’re trying to tweak? Or do you have any example of a site doing something similar to what you’re trying to achieve?

    #200478
    jordi

    Hello Tom,

    My English is not very good, I will try to explain with the help of images

    I want to resize the title of the category, attached image

    in the post (image post) the video dimensions are 1100×400, with these dimensions is the video (image post in category), if I change the dimensions in the post to make the video look bigger then the category the video looks disproportionate, my question is, if you can set a size for the video in the post and a size for the video in the category independently.

    a million thanks

    Jordi

    Image post
    http://www74.zippyshare.com/v/kfHesjo1/file.html

    Image post in category
    http://www102.zippyshare.com/v/9NMWScZj/file.html

    Change font size in category
    http://www71.zippyshare.com/v/QtGN3pub/file.html

    #200666
    Tom
    Lead Developer
    Lead Developer

    You could embed two separate videos at different sizes.

    Wrap them in two different divs:

    <div class="single-video">
        Video HTML for single post
    </div>
    <div class="category-video">
        Video HTML for category post
    </div>

    Then add this CSS:

    .single .category-video {
        display: none;
    }
    
    body:not(.single) .single-video {
        display: none;
    }

    As for the category title font size, this is the CSS you need:

    .page-header h1 {
        font-size: 25px;
    }
    #200759
    jordi

    `Hello Tom,
    Thanks for the reply
    sorry for ask a new question,

    Here, change “single-video” for the title of the post ??

    Here, “category-video” must be changed for the title of the category?

    I put the CSS in the CSS style parent theme or topic or CSS Style child theme

    Thank you

    #200991
    Tom
    Lead Developer
    Lead Developer

    Those classes stay the same, you put your youtube code inside each element:

    <div class="single-video">
        Video HTML for single post
    </div>
    <div class="category-video">
        Video HTML for category post
    </div>

    That’s what you add inside the post – two videos, one for the single post and one for the category view.

    Then you add your CSS:

    .single .category-video {
        display: none;
    }
    
    body:not(.single) .single-video {
        display: none;
    }

    That’s what will make the above HTML work – no need to change any classes, just add the videos inside those elements.

Viewing 15 posts - 1 through 15 (of 18 total)
  • You must be logged in to reply to this topic.