Youtube videos not responsive to portrait view on mobile – appear too large

• 

  journeyingthroughthebible · Member · Jan 2, 2018 at 8:15 am

  • Copy link
  • Add topic to favorites

  Hi
  I have a number of pages with YouTube videos embedded. I have recently changed from Twenty Ten to Twenty Seventeen theme.

  Youtube videos look fine on my computer screen and in landscape view on my Galaxy Note 3 mobile ‘phone (in other words they are sized correctly in that their width matches the width of the screen). However, on portrait view on my mobile ‘phone, the video appears too large, and only the central part of the video is seen. The left and right portions of the video are hidden from view. In other words, the YouTube video is not responsive to the mobile ‘phone screen width.

  I add the video to my pages by placing the video shortcode in my HTML-coded text in ‘Text View’ when editing. This worked fine till now.

  Is there a way of making the YouTube video responsive to my mobile screen size, please? Many thanks

  The blog I need help with is: (visible only to logged in users)

• 

  journeyingthroughthebible · Member · Jan 5, 2018 at 6:09 pm

  • Copy link

  Update – I’ve been given the following CSS code to fix this. On my Samsung Note 3 the videos are fully responsive to both portrait and landscape view. Thanks to the WordPress team for providing this solution.

  /* Youtube player responsive on mobile */
  .embed-youtube {
      position: relative;
      height: 0;
      padding-bottom:56.25%;
  }
  
  .embed-youtube iframe {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
  }