[Kilian]

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

[kensquires]

Hello Folks,

I remember helping one guy on here about embedding a video that he was hosting himself so let’s see if I can work my magic for this as well.

I see what you mean I copy/paste the code and it’s not showing up…

I have it solved and let me apologize right this moment this is going to be a long-winded answer

So I took the code you supplied above and tested it, I got the same results you did. At which point I actually looked at the code. The code seemed fine to me as I’ve embedded a number of things before and all those codes seem rather standard to a certain degree. I then clicked on the link that got highlighted in your above post and it took me here: Mixcloud

Now that seems like a very basic player but that’s fine, not knocking that so I tried to embed it directly from that page, but that too wasn’t working. I tried a few times thinking I did something wrong. Also got nowhere, so then I paid a closer bit of attention and under the share section, it had two things URL and Embed. So I went directly to the URL which took me here: https://www.mixcloud.com/KuBwebmedia/ralentir-ep01-podcast/

From that page, I chose to share it from that as you can choose a player style like a classic player, etc. So I chose classic and got the link and things continued not to work so I continued to dick with the code and found the problem.

Alright so here’s the long/skinny of it, the code you posted above is the same code I was using. But I found one thing wrong with it:
iframe width=”100%”
The first line of the code says that it turns out that Publii dislikes the percent sign and more or less says “huh?” so if you remove the percent sign “%” and just have an actual number your player will work just fine. For the record, I chose the number 300 in order for it to work on mine. Oh and in case you worried I resized my browser a few different times and each time the player would fit no matter how long I had the audio player

[Kilian]

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

 

[kensquires]

My personal advice is to teach yourself some HTML, I’m not trying to offend by saying that but this is just one of many problems with publii it inputs random bits of code like this for no reason. Forcing you to deal with any sort of random BS/changes that it chose to implement because that’s what they (the creators) feel is good for SEO when it’s truly clear that things like this hurt more than they help.

I have since moved on from using such a program in which you are handcuffed to the ways of the creator and have very little that you can do about it just because of their own beliefs for what they see is the best method for sites when things like this make the site more ugly/unappealing than anything.

[Bob]

Kilian 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)

--
Do you appreciate the support you've received today? If so, consider donating to the Publii team by clicking here; we'll be sure to use your donation to make Publii even better!

[publii-slpa]

@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!!

[candidexmedia]

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.

[Author]

Posts