WordPress.org

Ready to get started?Download WordPress

Forums

Featured Video Plus
[resolved] Where to insert CSS to make YouTube Video Container responsive (5 posts)

  1. cvestrada
    Member
    Posted 1 year ago #

    Alex,

    I was wondering if you could guide me so I can paste the following CSS code to make the container of the YouTube video responsive.

    My theme is responsive but the the Featured Video Plus plugin is not adjusting well:
    Here is my URL, re-size the browser window to see how it distorts the image.

    CSS to make container responsive:

    .video-container {
    position: relative; /* keeps the aspect ratio */
    padding-bottom: 56.25%; /* fine tunes the video positioning */
    padding-top: 60px; overflow: hidden;
    }
    
    .video-container iframe,
    .video-container object,
    .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    }

    Thank you!

    http://wordpress.org/extend/plugins/featured-video-plus/

  2. cvestrada
    Member
    Posted 1 year ago #

    My apologies for making yet another post.

    I left out the HTML.
    In what file of the plugin do I place the div?

    <div class="video-container">
    </div>

    Thank you again!

  3. Alexander Hoereth
    Member
    Plugin Author

    Posted 1 year ago #

    The plugin already defines a container around the video by it self, it has the class featured_video_plus and is defined in featured-video-plus/php/general.php at line 133. There you can easily rename it.

    The css goes either in featured-video-plus/css/backend-min.css or in your own css file within the theme, which you then include using wp_enqueue_style.

    Note that when updating plugin it will overwrite your changes in it's files! So you might have to redo them after an update. But I will look into integrating better responsiveness in the next release.
    Hope this helps,
    Alex

  4. cvestrada
    Member
    Posted 1 year ago #

    Alex,
    I was able to make the changes and now the YouTube container responds much better to different screen sizes.

    Thank you for this awesome plugin and looking forward to the next release.

    Regards,

  5. cvestrada
    Member
    Posted 1 year ago #

    Resolved.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic