1. Dismiss Notice

Video is not responsive

Discussion in 'SwiftRay WordPress Theme' started by markmorley, Apr 9, 2018.

  1. markmorley

    markmorley New Member

    Joined:
    Oct 30, 2012
    Messages:
    16
    Likes Received:
    0
    Hi,
    I love the theme and having issues when I embed video.

    If you look at
    http://www.newcastle-hypnotherapy.com/learn-self-hypnosis/

    you can see the video is far too large.

    So if I embed a video normally by placing the embed code into the page, it appears too large.
    Also it messes up the look of the theme on a mobile device, with the video going right across the page.

    I have improved things slightly by using the code from http://embedresponsively.com/
    this sorts out the issue on mobile devices but the size on the desktop version is far Ato big, even though I specify the size.

    Any ideas on what I can do to fix this?

    Thanks
     
    markmorley, Apr 9, 2018
    #1
  2. akbar92

    akbar92 Support Staff Staff Member

    Joined:
    Jun 3, 2017
    Messages:
    2,318
    Likes Received:
    49
    Hi,

    Hope you are doing good...!

    I just visited your website but didn't notice the issue as you mentioned above.

    Kindly have a look at the attached video.

    Regards,
    Akbar
    InkThemes.com
     
    akbar92, Apr 10, 2018
    #2
  3. markmorley

    markmorley New Member

    Joined:
    Oct 30, 2012
    Messages:
    16
    Likes Received:
    0
    Video?
     
    markmorley, Apr 10, 2018
    #3
  4. akbar92

    akbar92 Support Staff Staff Member

    Joined:
    Jun 3, 2017
    Messages:
    2,318
    Likes Received:
    49
    akbar92, Apr 12, 2018
    #4
  5. markmorley

    markmorley New Member

    Joined:
    Oct 30, 2012
    Messages:
    16
    Likes Received:
    0
    Thanks for the reply.

    To explain it better, go to this link and do the same as you did in the video

    http://www.newcastle-hypnotherapy.com/test-page/

    I have simply taken the embedded code from youtube and posted it into the html code for the page.
    The size is right as I want it on a pc but when you view it on a mobile it is not responsive.

    To get it nearly to work, I ahve to copy some code from embed responsivly buy it makes the vide far too large on my pcs but looks ok on a mobile.

    Im not sure why there is an issue as on my other wordpress skins it appears to work nciely.

    I do love this template and would rather stick with it.

    Thanks,

    Mark
     
    markmorley, Apr 15, 2018
    #5
  6. akbar92

    akbar92 Support Staff Staff Member

    Joined:
    Jun 3, 2017
    Messages:
    2,318
    Likes Received:
    49
    Hello,

    Thanks for getting back to us,

    Try to use the below-mentioned code:

    Code:
    <style>
.embed-container {
   position: relative;
   padding-bottom: 39.25%;
   height: 0;
   overflow: visible;
   max-width: 100%;
   width: 70%;
   margin: 0 auto;
}
.embed-container iframe,
.embed-container object,
.embed-container embed {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}
</style>

<div class='embed-container'>
<iframe src='https://www.youtube.com/embed/n6p6yGpvc7M' frameborder='0' allowfullscreen></iframe>
</div>
    Hope this helps...!

    Do let me know if the problem persists.

    Best Regards,
    Akbar
    InkThemes.com
     
    akbar92, Apr 16, 2018
    #6

Share This Page