Youtube Video Responsive on mobile

Hi,
I have an embeded youtube video that is on the homepage on this site and i cannot seem to get it to be responsive on mobile. I tried code i found on another support post from another member but it is still not functioning. Thanks

  • Patrick
    • Support Monkey

    Hi there Michael Zaccaria

    I hope you're having a great day!

    Instead of using the YouTube embed code in a code widget in Upfront, simply drag the responsive YouTube widget into your layout (it automatically resizes the video on mobile devices) and enter the YouTube URL. You're done. :slight_smile:

    Seeing that you had granted support access, I popped into your site and fixed it for you. Please let us know if there's anything else you need.

  • Michael Zaccaria
    • Design Lord, Child of Thor

    I cleared the cache and it doesn't loop in internet explorer but it does in google chrome. I tend to use IE as a viewing browser while i work on the website. Do you happen to know why it would do that? I tested from another computer as well and same issue on IE.

  • Patrick
    • Support Monkey

    Hey there Michael Zaccaria

    Yet another little quirk in IE, huh? :slight_smile:

    It does loop fine also in Edge on my Win10 machines, so it looks like the only real outstanding issue here is the looping in IE.

    I've tried various options like adding loop & autoplay parameters to the URL. But the YouTube widget in Upfront won't accept those parameters, only the short YouTube URL.

    So it looks like we may have to write up a bit of CSS to resize the video generated by the embed code for mobile devices after all.

    Please let me know if that's the way you want to go, and I'll whip something together.

  • Michael Zaccaria
    • Design Lord, Child of Thor

    Yeah IE is a pain. Only problem is in the financial/law industry many other websites are ONLY IE compatible which has made much of our user base IE users :cry:

    Custom CSS is perfect, whatever gets the job done right!

    I have other sites i use upfront on and may have to do this again to others. Will this be something i can adapt to any page or make a universal rule on all pages? Then i can copy and paste that code I assume to other websites?

  • Patrick
    • Support Monkey

    Hi again Michael Zaccaria

    I hope you had a great weekend!

    Allrighty then! I've embedded your video on my test site, with no ads at the end, which is using the default responsive breakpoints: 315px, 570px & 1080px.

    I pasted the video embed code in a Code element (like you had before), and wrapped it in a custom div like so:

    <div id="homevidembed"><iframe width="853" height="480" src="https://www.youtube.com/embed/SK47Nxc2L50?rel=0" frameborder="0" allowfullscreen></iframe></div>

    Then added the following to the Global CSS to get the embedded video centered:

    #homevidembed {text-align:center;}

    I then toggled open the responsive editor in Upfront, and added the following to the Global CSS for each breakpoint... note that there's no need to actually write media queries in Upfront responsive mode, as those are already coded in. :slight_smile:

    tablet 570px
    iframe {width:520px; height:292px;}

    mobile 315px
    iframe {width:285px; height:160px;}

    This is the result: http://upfront.pcwriter.net/

    If you are comfortable with editing yours as above, go for it! Otherwise, just let me know and I'll pop into your site to set it up for you.

  • Michael Zaccaria
    • Design Lord, Child of Thor

    I'm sorry for such a late reply I didn't see your response. That will work perfect for me! I hate to make you go through the trouble but I have a strong feeling i will mess this up one way or another would you mind doing it? I will grant support access. Thank you so much!

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.