BuddyDev

Search

[Resolved] Embed streamable.com video in member profile field

  • Participant
    Level: Enlightened
    Posts: 95
    Maksim Rusakovich on September 19, 2018 at 7:01 pm #17467

    Hello Brajesh

    I need this embed video function. It’s a very important for my site.
    I need that all videos from youtube, streamable, instagram play without any interface of these services. One simple video frame with Play button. Tap- play, tap – stop. Video is loop.

    Like instagram video. Just Play button.
    http://prntscr.com/kwcr0v

    I’m ready to pay for this code and hire your team. How to contact you for this mini project?

  • Keymaster
    (BuddyDev Team)
    Posts: 24623
    Brajesh Singh on September 19, 2018 at 8:54 pm #17470

    Hi Max,
    Thank you for posting.

    I can help with Oembed but skinning uniformly for all the services needs someone with much better JavaScript skills than we can do.

    I am sorry but I or my team is unable to assist with the skinning job.

    Also, before you hire someone for creating a proper skin for the services, I will recommend checking the terms of each of the service and see if they allow it. I am pretty sure that Youtube does not.

    You may hire at upwork or codeable for the same.

    Best Regards
    Brajesh

  • Participant
    Level: Enlightened
    Posts: 95
    Maksim Rusakovich on September 20, 2018 at 7:26 am #17500

    Hello Brajesh.

    Thank you. I see you are a professional. So, it’s easy to work with you.

    Also, it’s a problem to insert COUB video.

    0. Link to page with COUB
    https://r.abodva.com/members/abodva/

    1. I found the problem to see the raw frame of the video.
    http://prntscr.com/kwiq6r

    But adding a code to additional CSS to wordpress appearance doesn’t resolve it.

    
/* coub */
.contents {
  width: 500px !important;
    height: 500px !important;
}

    2. Also I tried to modify embed code of coub to hide unnecessary elements. Doesn’t work with additional CCS. But work, if I add the same code directly with Chrome Inspect window.
    https://codepen.io/maxrusakovich/pen/XPObXP

    3. Could you help with it? Maybe COUB is simpler to use.
    https://coub.com/dev/docs/Player+API%2FInline+frame+player

    P.S.

    Also coub has its own wordpress plugin
    https://wordpress.org/plugins/coub/

    Is it possible to add Custom shortcode profile field in your plugin?
    Maybe this can help to insert the video into the field?
    Thank you.

  • Keymaster
    (BuddyDev Team)
    Posts: 24623
    Brajesh Singh on September 20, 2018 at 6:50 pm #17510

    Hi Max,
    Thank you.

    All the video services you have used are providing ‘iframes’ for embedidng videos.

    When using iframe, web browsers apply same origin principle. If the iframe is from the same domain where it is embedded, you can use css/js and modfy its content. If it is coming from another domain, you can not apply custom css on the content inside the iframe. Only the site that you have linked in the iframe can.
    That’s why the browser is not applying your cuustom css.

    The css that you apply is local to you as a user and user modifications are ok for browser.

    About the COUB, Yes, I can help with it. It does provide the way for inline player. I can create a field( or infact use one of your exiting fields and let users enter the url like https://coub.com/embed/um0um0

    What settings from this page do you want to apply
    https://coub.com/dev/docs/Player+API%2FInline+frame+player

    Regards
    Brajesh

  • Participant
    Level: Enlightened
    Posts: 95
    Maksim Rusakovich on September 20, 2018 at 7:11 pm #17513

    Thank you for great support.

    Is it possible to reuse this embed coub video in my site and use my custom CSS?

    Perfect video coub for my site – just play button without any additional info.

    
<iframe id="coubVideo" src="http://coub.com/embed/um0um0?hideTopBar=true&noSiteButtons=true&noHDControl=true&muted=false&autostart=false&originalSize=true&hideTopBar=false&startWithHD=true" allowfullscreen="true" frameborder="0" width="450" height="360"></iframe>

    I think these parameters are the best for my purpose.

    Thank you for your great support!
    This topic is on the top in google search.

    ===
    Update. Is it possible? for example modify existing Coub wordpress plugin?

    with this?

    https://stackoverflow.com/a/13959836

    $('iframe').load( function() {
    $('iframe').contents().find("head")
      .append($("<style type='text/css'>  .my-class{display:none;}  </style>"));
});
  • Keymaster
    (BuddyDev Team)
    Posts: 24623
    Brajesh Singh on September 21, 2018 at 9:19 pm #17534

    Hi Max,
    The javascript won’t work. The suggestion on that stackoverflow question is incorrect. They did not specify the context. It only works if the iframe is loadig content from same origin.

    There is a solution and I have been able to solve it.

    All the restrictions apply on client side. If we filter on server side and append our stylesheet it works.

    I have created a tiny plugin which provides a proxy to the coub. We only load our own url in the iframe and the proxy file reads fro coub service and appends our stylesheet and then returns the content.

    It works. I will be cleaning up a little bit today and will share by day end today or tomorrow.

    Thank you
    Brajesh

  • Participant
    Level: Enlightened
    Posts: 95
    Maksim Rusakovich on September 22, 2018 at 9:44 am #17539

    It will be great, Brajesh!

    Waiting for your reply!

  • Keymaster
    (BuddyDev Team)
    Posts: 24623
    Brajesh Singh on September 22, 2018 at 11:28 pm #17559

    Thank you for the patience Max.
    1. Please download it from here
    https://buddydev.com/downloads/coub-custom/versions/coub-custom-1-0-0.zip

    2. After installing, you will need to make 2 changes

    A)
    Open ‘coub-custom.php’ and on line 19, you will see a code like this

    
	private $field_ids = array(
		87,
	);

    Remove 78 and add your own field ids that will contain the url from coub. You can use one or more text field. Save it.

    B). Open proxy.php, on line 12 you will see a code like this

    
// CHANGE this, with your own stylesheet.
$stylesheet_url = "http://example.com/somestyle.css";

    Add the url of your own custom stylesheet. That stylesheet will be added/injected in the iframe and anything you write there will apply to the player.

    PS:- In the text field, all you need to enter is an embed url like this

    http://coub.com/embed/um0um0

    Please give it a try.

    Regards
    Brajesh

  • Participant
    Level: Enlightened
    Posts: 95
    Maksim Rusakovich on September 24, 2018 at 2:38 pm #17590

    Hello Brajesh Singh

    Thank you for your help.
    1. Should be activated the main COUB plugin? Now, I disabled it.

    2. Field ID
    http://prntscr.com/ky4ei3

    

	/**
	 * Xprofile field ids , where you want it to be applied.
	 *
	 * @var array
	 */
	private $field_ids = array(
		955,
	);

    3. http://prntscr.com/ky4f3q
    But nothing happened
    http://prntscr.com/ky4fbk

    4. Is it possible to autoreplace standard coub video Url:
    https://coub.com/view/1ehmuc

    to your plugin url:
    https://coub.com/embed/1ehmuc

    Because standard users can be confused

    5. After updating the plugin to 1.0.1, the plugin asks to update it once again
    http://prntscr.com/ky4i6i

    Thank you.

  • Keymaster
    (BuddyDev Team)
    Posts: 24623
    Brajesh Singh on September 24, 2018 at 7:13 pm #17600

    Hi Max,

    1. You don’t need that.

    2. You have done it correctly, Please make sure you do not upgrade the plugin after your changes or they will be lost.

    3. The problem seems related to “allow_url_fopen” settings.

    Can you please check your phpinfo and see if it is enable or disabled. If it is disabled, I can use wp_remote_get.

    4. Sure, I will do in in next update today.

    5. It’s strange, There is something wrong with our dashboard if it is asking for update. I will look into it. For now, Please manually update this plugin.

The topic ‘ [Resolved] Embed streamable.com video in member profile field’ is closed to new replies.

This topic is: resolved