Skip to:
Content
Pages
Categories
Search
Top
Bottom

How make youtube videos responsive in activity stream?


  • 3T_MJ
    Participant

    @3t_mj

    8 years, 10 months ago

    If posts contain a video from youtube those videos are not responsive in the activity stream.

    I tried to use the class .activity-inner to make the video responsive, it worked for the video but at the same time it added big paddings to all other posts in the activity stream. So it’s not really an option.

    I used the following css

    .activity-inner {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 35px;
    height: 0;
    overflow: hidden;
}

.activity-inner iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}

    Now I was wondering if there’s a way to add an additional a <div class=”video-responsive”></div> container only to youtube (iframe) embeds but not to other posts that don’t contain a video?

    This additional div seem to be neccessary. If I leave that out and make the iframe width and height to 100%, the width of the youtube video gets displayed correctly but not the height (cut off).

    Any help would be appreciated.

Viewing 6 replies - 1 through 6 (of 6 total)

  • Slava Abakumov
    Moderator

    @slaffik

    8 years, 10 months ago

    Here is related topic: Making Youtube videos responsive


    3T_MJ
    Participant

    @3t_mj

    8 years, 10 months ago

    I read this thread but as I just said before, I need a div container just wrapping the iframe. But I don’t know how to achieve this.

    If I add the css generally to the div of the activity stream images and posts with any embeds aren’t displayed correctly anymore. If I don’t add css to the div, just to the iframe the videos get cut off.


    3T_MJ
    Participant

    @3t_mj

    8 years, 10 months ago

    If this solution works for everyone else, Maybe there’s another mistake somewhere. I will check.


    Slava Abakumov
    Moderator

    @slaffik

    8 years, 10 months ago

    bp_get_activity_content_body – that’s the filter you might need.
    See function bp_get_activity_content_body() for details.
    General idea (you will need a bit of regexp knowledge):
    1) search in activity content for <iframe keyword.
    2) if it exists – wrap it with the div you need
    3) That’s it. This will be done on a fly for each item in activity directory. This is generally a bad idea, but no other options that I see.

    Or you can try a bit different approach, like using Fitvids (see this plugin https://wordpress.org/plugins/fitvids-for-wordpress/ or https://wordpress.org/plugins/dw-fitvids/)


    3T_MJ
    Participant

    @3t_mj

    8 years, 10 months ago

    OK, it was my fault, had some other error in my css file. Thx helping me out.


    ineedyou
    Participant

    @ineedyou

    8 years, 5 months ago

    Sorry my english, is topic about that you are publishing new post (wp default) or custom post type and adding embed video to this post but not display on buddypress activty? I am searching solution everywhere…

    My Buddypress activity (and filter) show all kind post or cpt. BUt only text, text+image or text+featured image. Never show embed videos if added these post… Any solution did you find?

    I am using latest BP, WP and other pluging. Also if i use default theme dont show still…

    I reaaly need this solution. If no solution, do you have any idea, when activity will show “Mrx published new Food (my cpt), member will click Food link but will open popup or lightbox (you know rtmedia do this, if click image open lightbox).

    Thanks..

Viewing 6 replies - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.

Topic Info

Topic Tags

Skip to toolbar