Responsive Video and Widgets

swiftideas

ATTENTION, PLEASE READ: New topic creation is disabled, as we have moved to a new support system. Your existing topics will remain, but for all new requests you will need to use the new system. Click here to go to the new support request form.

This topic has 25 replies, 3 voices, and was last updated 8 years by David Martin – Support.

Viewing 15 posts - 1 through 15 (of 26 total)

1 2 →

Back to forum

Posted in: Dante
July 14, 2016 at 12:24 am #281120

sjeglum
Member

Post count: 39

I have been working to make our site fully responsive. The only elements that are not responsive are the video and the widgets at the bottom of the page.

I researched how to make the videos responsive and I found the Advanced Responsive Video Embedder plug-in. It works if I update the video’s link (which I did for the trailer on our homepage) but I can’t get it work universally. Do you know a way to get all the videos to be responsive globally on the site without needing to update the links? All the videos on our site are hosting on vimeo and already have the iframe containers in the embed code.

I am also wondering if you know a way to get the widget at the bottom of the page to be responsive?

Thank you!

July 14, 2016 at 12:13 pm #281245
Mohammad – SUPPORT
Moderator

Post count: 27441
Hi,
Please use this custom css code:-
```
iframe{
width:100% !important;
height:100% !important;
}
```
Thanks
Mohammad
July 18, 2016 at 10:26 pm #282129

sjeglum
Member

Post count: 39

Thank Mohammad. That did work for the widgets. The video on our homepage is still working well too, but that was one that I had updated the link for with the Advanced Responsive Video Embedder. Now all the other videos on our blog that don’t have an update link look like the attached screenshot. I went ahead and revert the change until we can get the videos at the correct size. Maybe I can’t get around updating each individual link.

Attachments:
You must be logged in to view attached files.

July 19, 2016 at 7:14 am #282174

Mohammad – SUPPORT
Moderator

Post count: 27441

Hi,
Please provide me specific page url with video issue.
Thanks
Mohammad

July 20, 2016 at 6:44 pm #282748

sjeglum
Member

Post count: 39

Hi Mohammad,

All of the videos on our blog have the issue of not being responsive: http://crazywisefilm.com/2016/05/11/crazywise-bonus-clip-finding-meaning/

I don’t have the css code that you sent above active on the site because it makes the videos look like the screen shot that I sent you. If you activate the css code then you will see what I am referring to on any of the videos on our blog.

Thanks,

Sandy

July 21, 2016 at 7:04 am #282832
Mohammad – SUPPORT
Moderator

Post count: 27441
Hi,
Please use this custom css code:-
```
iframe {
    border: 0;
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    top: 0px !important;
    left: 0px !important;
}
.body-text {
    margin-bottom: 30px;
    width: 100%;
    height: auto;
    position: relative;
    padding-top: 0px !important;
    padding-bottom: 56.25% !important;
    height: 0px !important;
    overflow: hidden;
}
```
Thanks
Mohammad
July 25, 2016 at 6:45 pm #283769

sjeglum
Member

Post count: 39

That did it. Thanks Mohammad.

July 26, 2016 at 1:01 am #283809

sjeglum
Member

Post count: 39

I just noticed that this code causes a weird reaction to the youtube widget at the very bottom on our website: http://crazywisefilm.com/

I tried updating the embed code on the widget, but that didn’t change anything:
<iframe src=”https://www.youtube.com/embed/videoseries?list=PLARv6QCNk7V3KxJzb7kEVbl7Tql6Au8R7″ frameborder=”0″ allowfullscreen></iframe>

Is there anything that can be done so that the full video shows in the youtube widget?

Thanks!

July 26, 2016 at 8:29 am #283852

Mohammad – SUPPORT
Moderator

Post count: 27441

Hi,
Just attach a screenshot image of issue.
Thanks
Mohammad

July 27, 2016 at 6:08 pm #284359

sjeglum
Member

Post count: 39

Hi Mohammad,

Note the youtube widget on the left side of the attached screenshot. It appears at the very bottom of our website (http://crazywisefilm.com/).

Thanks,

Sandy

Attachments:
You must be logged in to view attached files.

July 27, 2016 at 7:10 pm #284368
Mohammad – SUPPORT
Moderator

Post count: 27441
Hi,
Please use this custom css code:-
```
#footer .widget iframe{
height:auto !important;
}
```
Thanks
Mohammad
July 27, 2016 at 7:37 pm #284375

sjeglum
Member

Post count: 39

Thank you. The video in the YouTube Widget looks better now. However, it should say YouTube in text above the video (just like the other widgets says “Latest Tweets”, “Facebook”, etc.) Do you know why the “YouTube” text isn’t showing up?

It also looks like the Facebook widget is cut off. It is set up to show the latest posts and they are not showing.

I have attached a new screenshot.

Attachments:
You must be logged in to view attached files.

July 27, 2016 at 11:40 pm #284427

sjeglum
Member

Post count: 39

I also just noticed that none of our blog posts show any text anymore. Every blog post has text above the video and most have text above and below the video. See here or just look at any of our blog posts: http://crazywisefilm.com/2016/04/06/crazywise-bonus-clip-mental-health-recovery/

I am not sure if this issue is related to this CSS code that we added here or something else. Either way it’s very important to fix.

Thank you,

Sandy

July 28, 2016 at 5:42 am #284455

Mohammad – SUPPORT
Moderator

Post count: 27441

Hi,
I have managed footer youtube and facebook issue so please check. I am not able to get the blog page text issue. Just provide me marked screenshot image to get the issue exactly.
Thanks
Mohammad

August 1, 2016 at 7:29 pm #285324

sjeglum
Member

Post count: 39

It is something in this code that you gave me above that is removing the text from the blog posts:

iframe {
border: 0;
width: 100% !important;
height: 100% !important;
position: absolute !important;
top: 0px !important;
left: 0px !important;
}
.body-text {
margin-bottom: 30px;
width: 100%;
height: auto;
position: relative;
padding-top: 0px !important;
padding-bottom: 56.25% !important;
height: 0px !important;
overflow: hidden;
}

I have attached one screen shot with that code added and one without that code. Note that without the code, the blog text “Hear what Laura Delano…overcoming a mental health crisis.” is there and with the code it disappears. The code is working great for making the videos responsive, but somehow removing text on all our blog posts.

Thank you for your help in resolving this!

Attachments:
You must be logged in to view attached files.
Back to forum

Posted in: Dante