Support » Theme: Zerif Lite » Embedded Youtube video size problem

  • Hello,
    I have had a Youtube video on my site for months with no problems. Now, the video is displayed across the full screen, even though my embed code specifies the height and width. This was displaying correctly until just recently. It displays correctly on my localhost site.

    What changes can I make to get the video to display the proper size.

Viewing 15 replies - 1 through 15 (of 16 total)
  • Thread Starter PeggyLP

    (@peggylp)

    Here is the code I’m using-

    <div class=”video-container”><iframe src=”https://www.youtube.com/embed/DuoJjWv3Ndk?rel=0&enablejsapi=1&#8243; width=”560″ height=”315″ frameborder=”0″ allowfullscreen=”allowfullscreen”></iframe></div>

    Thanks.

    Is this video-container in a template?
    Are you running WordPress 4.4.1?
    …and a link to your site where the video is would help.

    Thread Starter PeggyLP

    (@peggylp)

    Hi,
    I am running WordPress 4.4.1. I noticed the change after a theme update.

    Thread Starter PeggyLP

    (@peggylp)

    Sorry, tried to post a link

    http://www.foodpantrysolutions.com/view-video

    Thread Starter PeggyLP

    (@peggylp)

    I’m using the Full Width Page template.

    So… you are putting this “video-container” in your page to contain the video, when you may not have to. Try this: WordPress Codex : Embeds.
    You can use the shortcode option to size the video.

    Another option is to use this plugin: Fluid Video Embeds and set the position option to “center”.

    Thread Starter PeggyLP

    (@peggylp)

    Hi,
    Thanks for that info. I used the container because I have set up video tracking in Google Tag Manager. It requires that I add “enablejsapi=1” to the Youtube URL. I tested using the example in https://codex.wordpress.org/Embeds but it did not allow the extra code for Google Tag Manager.

    I’ll take a look at https://wordpress.org/plugins/fluid-video-embeds/

    Thank you!

    Perhaps using this plugin would simplify your use of Google Tag Manager:
    DuracellTomi’s Google Tag Manager for WordPress

    Thread Starter PeggyLP

    (@peggylp)

    Unfortunately, neither of those options work for me. My video used to display correctly, based on the width and height specified in my code. Now, it displays across the full screen no matter what settings I use. And I really want to keep the Video tracking functionality, so I need to keep “enablejsapi=1”

    Any other solutions? Any help is appreciated!

    Keep this:

    <div class="video-container"><iframe src="https://www.youtube.com/embed/DuoJjWv3Ndk?rel=0&enablejsapi=1" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>

    Then install a Custom CSS plugin and put in this code:

    .video-container {
    display: block;
    margin: 1rem auto;
    width: ??px;
    height: auto;
    }
    
    .video-container iframe,
    .video-container embed {
    width: 100% !important;
    height: auto !important;
    }

    Replace the “??” with the width you want.
    If the height: auto; is not working properly, then replace the “auto” with the height plus “px” behind the numbers.
    This should center inside the page and retain the width/height you want.

    Thread Starter PeggyLP

    (@peggylp)

    Hi,
    Thank you for that css. I tried several modifications to get the size right. I ended up with this:

    .video-container {
    display: block;
    margin: 1rem auto;
    width: 560px;
    height: 315px;
    }

    .video-container iframe,
    .video-container embed {
    width: 100% !important;
    height: 100% !important;
    }

    When I changed auto to 100%, it is no longer responsive. But if I use height: auto !important;, the video looks too small and narrow.

    Getting closer!

    So I went to youtube to look at the video you are embedding and its size is different than the “box” you are trying to put it in, therefore it will distort.

    <iframe width="420" height="315" src="https://www.youtube.com/embed/DuoJjWv3Ndk" frameborder="0" allowfullscreen></iframe>

    Thread Starter PeggyLP

    (@peggylp)

    Here’s what I’m using and the video is too small and narrow:

    On View Video page:
    <div class=”video-container”><iframe src=”https://www.youtube.com/embed/DuoJjWv3Ndk?rel=0&enablejsapi=1&#8243; width=”420″ height=”315″ frameborder=”0″ allowfullscreen=”allowfullscreen”></iframe></div>

    Custom css:
    .video-container {
    display: block;
    margin: 1rem auto;
    width: 420px;
    height: auto;
    }

    .video-container iframe,
    .video-container embed {
    width: 100% !important;
    height: auto !important;
    }

    You are trying to create a box that you can put a tracking code in, but videos are multiple different sizes and fitting an embed code or iframe code into a responsive box is difficult at best (…I know, becasue I’ve tried).
    If the tracking code is so important, then you should read these two posts on the GTM and videos before going further:
    YouTube Video Tracking with Google Tag Manager (V2) and Universal Analytics: A Step-by-Step Guide
    and
    YouTube video tracking via Google Tag Manager

    Thread Starter PeggyLP

    (@peggylp)

    I’ll read more about it.
    Thanks for all of your help!

Viewing 15 replies - 1 through 15 (of 16 total)
  • The topic ‘Embedded Youtube video size problem’ is closed to new replies.