Make Videos in Guide Responsive to Mobile web browser

Answered

2 Comments

  • Mack Burgess
    Comment actions Permalink

    Also experiencing this issue

    0
  • Andrew Dietrich
    Comment actions Permalink

    Hi Matt,

    By default, youtube embed code looks like this, with fixed values for height and width in the style:

    <iframe width="1249" height="703" src="https://www.youtube.com/embed/0TOIgNx7yZc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

    This isn't very helpful for a responsive design, so it will require some custom CSS to get it to fit across all devices. If your Guide plan allows for theme customization, I've found that this is an excellent workaround:

    http://coolestguidesontheplanet.com/videodrome/youtube/ 

    Paste the CSS they've provided in your style.css, then add the youtube embed URL to the article editor using the Source Code button (the "</>"). Your code should look like this:

    <div class="video-container"><iframe src="https://www.youtube.com/embed/0TOIgNx7yZc"></iframe></div>

     

    You will end up with a video that is responsive to the viewport, so it should work across both desktop and mobile. As a sidenote, it seems to look a little odd in the editor itself, but once it's published it looks great!

    0

Please sign in to leave a comment.

Powered by Zendesk