How do I make iframe responsive in Daylight?
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
-
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
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. -
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.
-
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?
-
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 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:
Here's a screenshot of just wrapping it in a <div> and setting the wxh to 100%, without any further coding:
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:
What do you think?
-
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:
When I expand the announcement to full screen:
-
Oh wow! That did it! Thanks @Bill Harrison
-
👍
-
I use the responsive video fix also, and it is one of the cheap tricks bag I will be sharing in my Fusion poster.
