Download
We're evolving to serve you better! This current forum has transitioned to read-only mode. For new discussions, support, and engagement, we've moved to GitHub Discussions.

Audio player – Embed

  • #8397
    Avatar photo[anonymous]

    Hi,

    I hope this topic has not already been discussed.

    We’ve been using Publii for few weeks now and we’ve encountered some issues with the integration of an audio player such as Mixcloud, Podbean… When we paste the iframe code within the “Insert/edit media>Embed” tab, it appears in the draft but when we want to have a preview, the player won’t appear (it’s the same when the website is synchronised).

    This link, for example won’t appear : <iframe width=”100%” height=”120″ src=”https://www.mixcloud.com/widget/iframe/?hide_cover=1&light=1&hide_artwork=1&feed=%2FKuBwebmedia%2Fralentir-ep01-podcast%2F&#8221; frameborder=”0″ ></iframe>

    It only appears if we expands manually the size of “box” the audio player finds itself in. But doing so, even if the the audio player now appears on the website (preview and synchronised) the audio player is no more responsive. On a pc it doesn’t really matter however on a mobile phone, the audio player does not appear entirely.

    We are no expert in that field, so I don’t know wheter that’s clear, therefore, we would very appreciate some help if someone has a better understanding of this issue.

    Thank you

    #8412
    Avatar photo[anonymous]

    Hi,

    I should first like to thank you for your time and consideration.

    So, I tried what you’ve done and it worked ! Thank you. That’s a first step, although I wish it dit work by itself and not have to “guess”.

    Now we have an other issue… There is a large empty space at the bottom of the player. Here a screenshot :  https://postimg.cc/sBfDm3f1

    There is no explanation. Here is the code.

    <p><iframe width="325" height="120" src="https://www.mixcloud.com/widget/iframe/?hide_cover=1&amp;light=1&amp;feed=%2FKuBwebmedia%2Fralentir-ep01-podcast%2F" frameborder="0"></iframe></p>
    <p>Avec Dominique Méda, sociologue spécialiste du travail, l<span style="color: var(--text-primary-color); font-family: var(--editor-font-family); font-size: inherit; font-weight: var(--font-weight-normal);">’équipe Orignal communication, </span><span class="s1">David Bernard, dirigeant d’AssessFirst. <br>Réalisation : Alicia Blancher (Kaizen magazine)<br></span></p>

    I don’t know if that you are aware of this “sudden margin” which, incidentally, does not appear in the draft.

    In any case, we’ll try to resolve it, whatever, it’s unfortunate it’s not that simpler.

    Thank you

    #8414
    Avatar photoBob
    [anonymous] wrote:

    don’t know if that you are aware of this “sudden margin” which, incidentally, does not appear in the draft.

    To keep all iframes responsive, they are placed in an additional container with an aspect ratio calculated from the iframe’s width and height attributes.
    You only need to enter the correct value for these attributes. In your case, I propose to use the following: width=”537” height=”120

    You can also disable the aspect ratio by adding to your iframe the `data-responsive=”false”` attribute (More about it: https://getpublii.com/dev/how-the-post-content-is-modified-before-the-output/#make-iframes-responsive)

    #8592
    Avatar photo[anonymous]

    @kensquires

    Your criticism is hardly fair.

    Remember, Publii is designed for people who are not technical who want an attractive site they can make for themselves. In this regard, Publii is the only product that does this completely without technical knowledge and does it extremely well.

    I am a technical user and sometimes work outside of Publii’s intent. I have had very little problems with the product. Yes Publii has to do things that may be unexpected for a guy like me, however, I recognize this as a high quality feature of the product and not an impediment. I have never had a problem working <span style=”color: #00ff00;”>within</span> Publii to make things work as advertised. Again, Publii has to make particular code to make things work properly and reliably for their GUI based users and it does this brilliantly. The results are of extreme high quality.

    After decades of writing code that writes code, especially HTML, JS, CSS, Borwser compatibilities, etc., this can be a difficult process. Working around idiosyncrasies sometimes results in CYA code and work-arounds to assure proper results.

    In fact, given the task at hand, the resulting code is so high in quality that the product is put into the CoffeeCup and Adobe class of quality results. The more I work with Publii, the more I am amazed at how it works. It is extraordinarily well designed, elegant in it’s design and simplicity, and does exactly what you need it to do. You can pay money for a product that does not compare.

    If you do not like Publii, do not use it. If you do not like publii, do not come here and complain about it. It just makes you look small.

    Cheers!!

    #8595
    Avatar photo[anonymous]

    Hey Kilian:

    I went to the podcast’s main page: https://www.mixcloud.com/KuBwebmedia/ralentir-ep01-podcast/

    From there, I clicked on the Share/Embed button > Embed Player.

    I got three options:

    Picture Widget:

    <iframe width="100%" height="400" src="https://www.mixcloud.com/widget/iframe/?light=1&feed=%2FKuBwebmedia%2Fralentir-ep01-podcast%2F" frameborder="0" ></iframe>

    Classic Widget:

    <iframe width="100%" height="120" src="https://www.mixcloud.com/widget/iframe/?hide_cover=1&light=1&feed=%2FKuBwebmedia%2Fralentir-ep01-podcast%2F" frameborder="0" ></iframe>

    Mini Widget:

    <iframe width="100%" height="60" src="https://www.mixcloud.com/widget/iframe/?hide_cover=1&mini=1&light=1&feed=%2FKuBwebmedia%2Fralentir-ep01-podcast%2F" frameborder="0" ></iframe>

    In the WYSIWYG Post Editor, click on the HTML “Source Code” button and paste your iframe there. This is what typically works for me, and what worked to display your audio player widgets properly.

    Of course, to remove the extra spacing, add the `data-responsive=”false”` attribute that was mentioned earlier.