Support » Plugin: Featured Video Plus » Where to insert CSS to make YouTube Video Container responsive

  • Resolved cvestrada



    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!

Viewing 4 replies - 1 through 4 (of 4 total)
  • 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">

    Thank you again!

    Plugin Author Alex


    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,

    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.



Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Where to insert CSS to make YouTube Video Container responsive’ is closed to new replies.