Responsive Video and Widgets

[sjeglum]

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!

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-

iframe{
width:100% !important;
height:100% !important;
}

Thanks
Mohammad

[sjeglum]

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.

[Mohammad – SUPPORT]

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

[sjeglum]

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

[Mohammad – SUPPORT]

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

[sjeglum]

That did it. Thanks Mohammad.

[sjeglum]

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&#8243; frameborder=”0″ allowfullscreen></iframe>

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

Thanks!

[Mohammad – SUPPORT]

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

[sjeglum]

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.

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-

#footer .widget iframe{
height:auto !important;
}

Thanks
Mohammad

[sjeglum]

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.

[sjeglum]

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

[Mohammad – SUPPORT]

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

[sjeglum]

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.