video display issues with virtue theme and different devices/screens

  • Resolved lovingrd

    (@lovingrd)


    8 years, 7 months ago

    Hi, I’m having the same issue with mobile videos and sizes. I originally used the suggested youtube and vimeo share code (with iframe), which looks great on computer screen, but does not adjust to mobile well. I then tried the solution suggested above using the embed icons and setting size, but that does not look good on computer screen preview. Is there a happy compromise? My site is https://www.thrivetrue.com and the page I’m working on currently is thrivetrue.com/connection-visualization. I have left it as originally done with code pasted from youtube and vimeo for now, but would like to fix it and will need this info for several other pages. My old wordpress.com site and theme adjusted fine with embed, but since switching to www.ads-software.com and virtue theme, videos are not automatically adjusting for the device. Thanks in advance for any help.

Viewing 4 replies - 1 through 4 (of 4 total)
  • hannah

    (@hannahritner)

    Hey,
    If you’re using the youtube and vimeo shortcodes you shouldn’t be having a problem on mobile. Your shortcode should look something like this:
    [kad_youtube url="YOUTUBE URL" width=700 height=600 ]
    Is that what you had? Make sure you are adding the url, not the embedded code.

    Hannah

    Thread Starter lovingrd

    (@lovingrd)

    Hi, when I tried the icon youtube/vimeo buttons from the theme, it didn’t look right on computer screen so I left it with embedded/iframe code for now as suggested on youtube/vimeo sites instead. However, I’d prefer to use the shortcode from theme icon buttons if I can get it looking good so it will adjust for mobile. For these particular videos, it wasn’t big deal on mobile because they are really more for audio, but for future online course tutorial videos, it will matter so I need to learn how to fix it. If I type in the width and height that you suggested, it is cutting off part of the height. I tried several other numbers as well and also with no set height and width and it seems whatever I try, it still cuts off part of the height. I would like it to display as it currently does on computer screens (the iframe code from both youtube and vimeo worked great for that), but also adjust for mobile. Any suggestions as to how to get the height and width to display correctly on computer screen if I use the shortcode? My old site (which was twenty ten theme I think) always auto adjusted for devices without me doing anything special other than inserting the video links, but new site with virtue theme doesn’t seem to work that way. Any tips to get it looking great on both computer and mobile is greatly appreciated! Maybe I just don’t know the best numbers to put into height and width? It didn’t look good when I used the same numbers in shortcode from iframe code. Thank you!

    Hey,
    You have to put the width and height that match the video. If you look at the video on youtube or vimeo you can see in the embed code what the width and height area. That sets the video ratio.

    If you want to determine the max width use max-width:”700″

    Kadence Themes

    Thread Starter lovingrd

    (@lovingrd)

    Fabulous! Thank you! I had tried the embed numbers for width and height so maybe adding the max width made a difference. I don’t know, but I’m grateful that it looks much better now. Thanks!!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘video display issues with virtue theme and different devices/screens’ is closed to new replies.