Loading ...

Videos Are Not Responsive On Mobile | Communifire Support

Home » Spaces » Communifire Support » forum » Features and Functionality » Videos Are Not Responsive On Mobile
Communifire Support

Leave Space :

Are you sure you want to leave this space?

Join this space:

Join this space?

Add a new tab

Add a hyperlink to the space navigation. You can link to internal or external web pages. Enter the Tab name and Tab URL. Upload or choose an icon. Then click Save.

The name that will appear in the space navigation.
The url can point to an internal or external web page.
Login to follow, share, and participate in this space.
Don’t have a support community login?Create your account now
Posted in: Features and Functionality

Videos Are Not Responsive On Mobile

Subscribe to RSS
  • Hello, 

    We are having issues with the way our videos are displayed on mobile format, through the app. 

    The video shows up how we would like on desktop, showing the correct size, but through the mobile app, the video is not being responsive to the mobile format, causing the video to cover to trail off the edge. 

    I noticed that in your community center videos, your videos are responsive to size on mobile. They look great. Is there something that we can maybe add to our code or do to enable the videos showing up like yours do? 

    Thank you! 

     

  • Answered

    Hi Brittney!

    Can you please let me know how this video was added to the site? 

    Can you also give a URL directly to the hosted video so I can take a look? 

    Thanks,
    Foster

  • No problem. 

    We added this video by using the Insert/Edit Media button and then pasted the embed code from Wistia in the Embed section. It automatically filled in the dimensions from Wistia. 

    Here is the URL to the video:

    https://gopowergrid.com/spaces/297/grid-leaders/wiki/view/7428/how-to-wholesale-assigning-contracts-for-quick-profits

    Thank you!

  • Hi Brittney,

    When you retrieve the Embed code, please choose the Responsive video size. This will allow the Wistia video to size correctly for the screen it is on.

    Thanks!
    Foster

  • Hi Foster, 

    When I selected it to be Responsive, Wistia automatically changed the html from an iframe element to a div class element.

    I went ahead and pasted the embed and it is showing up with a giant blank white space and the video squished at the bottom. 

  • Hi Brittney,

    For the video height, it looks like this is how the Fallback embed type is displayed. Try changing the embed type to Standard, and copy the embed code. Then add it to the wiki source code using View > View Source. This is how we embed Wistia videos on our wiki pages.

    To get rid of the white space, find padding:62.5% and change 62.5% to 0 .

    Grace

  • Thank you, Grace! I attempted to try the standard setting. 

    I tried deleting the video altogether, so I could re-embed and it will not let me delete this extra space, even with no code showing.

    I tried going to a different wiki and then reloading the page back up, but it's still showing space with no code in the back end. 

     

     

  • Update: I got rid of the extra space by deleting the code source. It was still showing the wrapper in view source.

    However, when I do as you suggested > Inserted the correct standard code + changed 65% to 0%  into the view source, it is still showing space and no video. 

    Can you please screenshot an example of how the html of your view source for a video please?

    Here is ours, below. 

    Thank you!  

     

  •  

  • Hi Brittney,

    It looks like the script tags are being removed. We made a change on your site. Could you try adding the embed code again?

    This is how the embed code looks like for our pages:

    The editor wraps the <script> tags in <p> tags when you save the source code, but it doesn't affect the video.

    Grace

  • Oh thank you. I deleted the blank space before I inserted the code. Was that correct in doing so? 

    The video shows up great, but its at the bottom of the wiki, covering the text now. 

    I screenshot the view source below. 

     

  • Hi Brittney,

    Yes, set the padding to 0. Also delete lines 9 and 10 containing the div with class wistia_swatch. This also adds space at the top of the video.

    Grace

  • Ohh thank you so much! That worked wonders. We are sooo close. This has been a huge learning curve. 

    How can I adjust or tweak to make the space at the top of the video decrease and the space at the bottom before the text increase a bit? 

     

  • Answered

    Hi Brittney,

    The space at the top is being caused by an empty line at the top. You can delete it in the source code - <p>&nbsp;</p> .

    It looks like the text was wrapped by the embed code. Cut </div> in line 22 and paste it in line 9, so the two closing divs are next to each other. Then to increase the space below the video, add margin-bottom: 30px; to the style.

    The wiki page should look like this after you make those changes.

    Grace

  • Thank you so much, Grace. You saved us.

    This process is quite a work-around for every video, but we are glad we could come to a conclusion, resolve the issues + know what to do moving forward. 

    All our videos are responsive on mobile now. Thank you for your help and providing screenshots. I don't think I would have figured it out if you didn't send those over. 

Page 1 of 1 (15 items)