Search code examples
htmlcssresponsive-designyoutubeembedding

Full Width and Height Responsive Embedded YouTube Video


I'm working on a project and if you scroll down to the "What is RoadAware" section you can see a YouTube video embed that looks awful! I need the video to fill the "about-left" div 100% to match the "about-right" div. I've been struggling to find an answer, any help is really appreciated!

http://road-aware.herokuapp.com/


Solution

  • Add embed-responsive embed-responsive-4by3 to your video-wrapper class

    This is from bootstrap

    <!-- 16:9 aspect ratio -->
    <div class="embed-responsive embed-responsive-16by9">
      <iframe class="embed-responsive-item" src="..."></iframe>
    </div>
    
    <!-- 4:3 aspect ratio -->
    <div class="embed-responsive embed-responsive-4by3">
      <iframe class="embed-responsive-item" src="..."></iframe>
    </div>