How do I make iframe responsive in Daylight?

Options
John.Davis173
John.Davis173 Posts: 13 🌱
edited November 2022 in Development

I am currently testing Daylight for the August release. My organization uses Vimeo for videos. The height and width requirements for iframe just make it look bad in the right hand column of the new homepage. I found some CSS code for responsive iframes, but I'm not a coder and don't know how to put it into the HTML editor in the WYSIWYG.

 

Does anyone have suggestions for responsive iframe code?

 

Thanks!

Answers

  • Bill.H.891
    Bill.H.891 Posts: 12 🌱
    edited November 2022
    Options

    Here is code that will work. Replace the bolded url here with the url in the embed code you get from Vimeo.

     

    <div style="position: relative; display: block; max-width: 100%;"><div style="padding-top: 56.25%;"><iframe src="url here

    allowfullscreen 

    webkitallowfullscreen 

    mozallowfullscreen 

    style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; width: 100%; height: 100%;"></iframe></div></div>

     

    To put this code in a file, go to the HTML editor and choose the code icon htmlcode in the bottom left. This will open the HTML code view. Paste the code above in the location where you want the video to be and save.

     

  • Bill.H.891
    Bill.H.891 Posts: 12 🌱
    edited November 2022
    Options

    I forgot to mention that you can also use the HTML templates provided by D2L (https://community.brightspace.com/generic/s/article/Daylight-HTML-Template). They include a template page for responsive videos.

     

     

  • John.Davis173
    John.Davis173 Posts: 13 🌱
    edited November 2022
    Options

    Thanks @Bill Harrison​  ! I found that when I put a <div> around the <iframe> change the width and height to "100%" instead of the designated pixels, it gave me the results I wanted. For the news feed in the right column view of my homepage.

     

    Original:

    <p><iframe width="640" height="564" src="URL" frameborder="0" allowFullScreen mozallowfullscreen webkitAllowFullScreen></iframe></p>

     

    Fix:

    <div><iframe width="100%" height="100%" src="URL" frameborder="0" allowFullScreen mozallowfullscreen webkitAllowFullScreen></iframe></div>

     

    In response to your answer, the <div style="padding-top:56.25%;"> gives me way too much space at the top, another article recommended to pad at the bottom, and that gave me way too much space at the bottom. So, I deleted it.

     

    There is a new wrinkle in this question though: With either your method or mine entered in the HTML code, the video fits in the right pane of the home page perfectly. But, if they click to expand the article, the video is now small and centered, instead of becoming bigger (and left aligned, but that doesn't bother me as much). Do you (or any other great community members) know why that happens?

     

  • Bill.H.891
    Bill.H.891 Posts: 12 🌱
    edited November 2022
    Options

    Hmm... not sure why you would get extra space at the top or see the issue with teh expanded article. We use this code is our instance just fine. It works in announcements, course files, discussions, assignments, etc.

     

    Can you share the code for one of your Vimeo videos where you tried to incorporate my code?

  • John.Davis173
    John.Davis173 Posts: 13 🌱
    edited November 2022
    Options

     

    John Davis (Community Member)

    Actions for this Feed Item Comment

    @Bill Harrison (Customer)​ unfortunately, we our video privacy settings are pretty strict to protect ip at my company, so I'm not sure you'd be able to fully reproduce this instance.

     

    Here's the code using your suggestion:

     

    <div style="position: relative; display: block; max-width: 100%;">

    <div style="padding-top: 56.25%;"><iframe src="https://player.vimeo.com/video/216005295" width="100%" height="100%" frameborder="0" allowfullscreen=""></iframe></div>

     

    Here's a screenshot:

    DIVwPaddingRightPane 

     

    Here's a screenshot of just wrapping it in a <div> and setting the wxh to 100%, without any further coding:

    DIVwithoutPaddingRightPane 

    See how the video snuggles up to the text now?

     

    Also, here's what I'm talking about when I say the full article now makes the video look small in both instances:

     FullNewsArticleSmallvid

     

    What do you think?

     

  • Bill.H.891
    Bill.H.891 Posts: 12 🌱
    edited November 2022
    Options

    Ok a couiple of things....

     

    In your code where you incorporated my suggestion there are some things missing. Not sure if it is a copy/paste problem.

     

    Your code:

     

    <div style="position: relative; display: block; max-width: 100%;">

    <div style="padding-top: 56.25%;"><iframe src="https://player.vimeo.com/video/216005295" width="100%" height="100%" frameborder="0" allowfullscreen=""></iframe></div>

     

    Here is what it should look like with my code where I have highlighted and underlined those missing:

     

    <div style="position: relative; display: block; max-width: 100%;"><div style="padding-top: 56.25%;"><iframe src="https://player.vimeo.com/video/216005295

    allowfullscreen 

    webkitallowfullscreen 

    mozallowfullscreen 

    style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; width: 100%; height: 100%;"></iframe></div></div>

     

    Was this missing in what you pasted in your course? I think the first highlighted item should snuggle the video back up to the text. Or maybe the missing closing div.

     

    Note: I can't see the video but the code still puts in the space.

     

    When I put this code in an announcement I see this:

     

    badvideo

     

     

    When I expand the announcement to full screen:

     

    badvideofull

  • John.Davis173
    John.Davis173 Posts: 13 🌱
    edited November 2022
    Options

    Oh wow! That did it! Thanks @Bill Harrison​ 

  • Bill.H.891
    Bill.H.891 Posts: 12 🌱
    edited November 2022
    Options

    👍

  • Renee.J.194
    Renee.J.194 Posts: 113
    edited November 2022
    Options

    I use the responsive video fix also, and it is one of the cheap tricks bag I will be sharing in my Fusion poster.