Typo3 9.5.11 wraps <p> around <iframe> (CKEditor?) - iframe

I added an iframe to my CKEditor with the embed plugin.
When i try to add in iframe it works and when is save it, it works in frontend and saves it like this in the database:
<div data-oembed-url="https://www.youtube.com/watch?v=C0DPdy98e4c">
<div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 75%;">
<iframe allow="encrypted-media; accelerometer; gyroscope; picture-in-picture" allowfullscreen="" scrolling="no" src="https://www.youtube.com/embed/C0DPdy98e4c?rel=0" style="border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;" tabindex="-1">
</iframe>
</div>
</div>
But when i open the editor now again in the backend the iframe is broken, when i click on source it looks like this:
<div data-oembed-url="https://www.youtube.com/watch?v=C0DPdy98e4c">
<div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 75%;">
<p>
<iframe allow="encrypted-media; accelerometer; gyroscope; picture-in-picture" allowfullscreen="" scrolling="no" src="https://www.youtube.com/embed/C0DPdy98e4c?rel=0" style="border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;" tabindex="-1"
></iframe>
</p>
</div>
</div>
The config for my editor looks like this:
editor:
config:
removePlugins:
- null
removeButtons:
- Strike
AllowedContent:
- true
allowTagsOutside:
- iframe
allowTags:
- iframe
In my Page.ts i added this:
RTE {
default {
proc.allowTags := addToList(object,param,embed,iframe)
proc.allowTagsOutside := addToList(object,embed,iframe)
proc.entryHTMLparser_db.allowTags < .allowTags
proc.entryHTMLparser_db.allowTags := addToList(iframe)
}
}

i think my problem was that my old config in the rte.ts from my typo3 6.x version was still loaded. i added this to my default.yaml:
editor:
processing:
allowTags:
- s
- span
- iframe
- i
HTMLparser_db:
tags:
span:
rmTagIfNoAttrib: false
config:
allowedContent: true
removeFormatAttributes: ""
extraAllowedContent:
- span
- iframe
and added this to my page.ts
RTE.default.proc.blockElementList = PRE,UL,OL,H1,H2,H3,H4,H5,H6,ADDRESS,DL,DD,HEADER,SECTION,FOOTER,NAV,ARTICLE,ASIDE,IFRAME
Hope this helps you if you experience the same problem.

Related

Add part of a website to my wordpress.com

I am trying to add a part of another website inside my wordpress.com website.
So I thought I would try iframe, but although this code would have worked on a regular website it doesn't seem to work in wordpress.com.
<div id="my-div" style="width: 400px; height: 200px; overflow: hidden; position: relative;">
<iframe id="my-iframe" style="position: absolute; top: -100px; left: -100px; width: 1280px; height: 1200px;" src="http://www.example.com/" width="300" height="150" scrolling="no"></iframe>
</div>
In wordpress I just get http://www.example.com/ as a result to this code.
Is there a way to make this work?
Try
<object data=http://www.example.com width=”650″ height=”500″> <embed src=http://www.example.com width=”650″ height=”500″> </embed></object>

youtube subscribe button below video like its a part of video

I see many trending websites use youtube subscribe button as shown in attached pic. but I am Unable to know how to use that subscribe button in websiteplease check the image for more deatails
here is the html text of story picks that uses same subscribe button
< div class="video-byline">
Subscribe to Storypick
you will have to use this code
<iframe width="560" height="315" src="https://www.youtube.com/embed/QFu_Kmn3qOk" frameborder="0" allowfullscreen></iframe>
<script src="https://apis.google.com/js/platform.js"></script>
<script>
function onYtEvent(payload) {
if (payload.eventType == 'subscribe') {
// Add code to handle subscribe event.
} else if (payload.eventType == 'unsubscribe') {
// Add code to handle unsubscribe event.
}
if (window.console) { // for debugging only
window.console.log('YT event: ', payload);
}
}
</script>
check this link https://developers.google.com/youtube/youtube_subscribe_button
and you can select a lot of configurations with the button
Hope this helps
take care and happy coding
Subscribe to Storypick
Here it is #Pedro Lobito
<span style="vertical-align:top"> Subscribe to Storypick </span>
<div id="___ytsubscribe_0" style="text-indent: 0px; margin: 0px; padding: 0px; border-style: none; float: none; line-height: normal; font-size: 1px; vertical-align: baseline; display: inline-block; width: 123px; height: 24px; background: transparent;"><iframe frameborder="0" hspace="0" marginheight="0" marginwidth="0" scrolling="no" style="position: static; top: 0px; width: 123px; margin: 0px; border-style: none; left: 0px; visibility: visible; height: 69.1875px;" tabindex="0" vspace="0" width="100%" id="I0_1461955290924" name="I0_1461955290924" src="https://www.youtube.com/subscribe_embed?usegapi=1&channel=Storypick&layout=default&count=default&origin=http%3A%2F%2Fwww.storypick.com&gsrc=3p&ic=1&jsh=m%3B%2F_%2Fscs%2Fapps-static%2F_%2Fjs%2Fk%3Doz.gapi.en.HQVJrXyUzfY.O%2Fm%3D__features__%2Fam%3DAQ%2Frt%3Dj%2Fd%3D1%2Frs%3DAGLTcCPsfVIW1uZpDHhPYnkBRXvQcHltAQ#_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe%2C_renderstart%2Concircled%2Cdrefresh%2Cerefresh%2Conload&id=I0_1461955290924&parent=http%3A%2F%2Fwww.storypick.com&pfname=&rpctoken=32575577" data-gapiattached="true"></iframe></div>
</div>
Here it is #Pedro Lobito
You can create a Subscribe button over here.
You can also make your own button, and then link it to the subscription confirmation page, which you can get by appending ?sub_confirmation=1 to your channel URL.: https://www.youtube.com/channel/your_channel_id?sub_confirmation=1 (example)

I do not get to do this responsive iframe of Radionomy

I need to make an iframe that provides me responsive Radionomy, RN is a vanadium streaming service.
<iframe style="border:0px; width:250px; height:90px;" frameborder="0" scrolling="no" src="http://radionomy.letoptop.fr/titre.php?radiouid=396bc69a-dae1-430e-bef0-2d1674e42c21&color=000000&bgcolor=FFFFFF&width=250&height=90&size=12&thumb=50&font=Verdana&margin=8"> Votre navigateur ne supporte pas les IFrames</iframe>
My page is responsive but I can not adapt this iframe, which makes my web unabled to be adapted for other resolutions on different devices.
I searched the internet for possible solutions, but I have seen that most sites provide solutions for youtube and vimeo iframes.
I tried this way but I have not succeeded:
HTML:
<div class="contenedor-caratula-responsive-r">
<iframe scrolling="no" src="http://radionomy.letoptop.fr/titre.php?radiouid=396bc69a-dae1-430e-bef0-2d1674e42c21&color=ffffff&bgcolor=000000&width=671&height=377&size=15&thumb=260&font=Open Sans&margin=15&">Tu navegador no sporta los IFrames</iframe>
</div><!--contenedor-caratula-responsive-r-->
</div> <!--close contenedor-r-->
CSS:
.contenedor-caratula-responsive-r{
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
display:block;
}
.contenedor-caratula-responsive-r iframe{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
EDIT: Is there any way to change the size using javascript?

Flash banner overlapping other code

When flash banners from thirdparty are displayed they are overlapping my code:
test URL is: http://test.otwierac.pl/ (refresh page many times and you will see)
Code is:
<div style="width:100%">
<div id="banner">
<script>
<!--
var d = new Date();
r = escape(d.getTime()*Math.random());
document.writeln('<script src="http://tracking.novem.pl/rotator/CD31115/59&js=1&r='+r+'&keyword="><\/script>');
//-->
</script><div id='beacon_1' style='position: absolute; left: 0px; top: 0px; visibility: hidden;'><img src='http://test.otwierac.pl/reklamy/www/delivery/lg.php?bannerid=1&campaignid=1&zoneid=0&loc=http%3A%2F%2Fwww.test.otwierac.pl%2F&referer=http%3A%2F%2Ftest.otwierac.pl%2F&cb=6d0002d6e4' width='0' height='0' alt='' style='width: 0px; height: 0px;' /></div>
</div>
</div>
CSS code:
#banner
{
margin-top:10px;
width:950px;
margin:0 auto;
text-align:center;
}
How to fix this ? Banners should be centered and not overlapping my text.
There's a flash parameter
wmode: opaque
Should do the trick
EDIT
From the adobe website:
opaque - The SWF content is layered together with other HTML elements on the page. The SWF file is opaque and hides everything layered behind it on the page. This option reduces playback performance compared to wmode=window or wmode=direct.
EDITED:
Try:
#banner {
height: 315px;
margin-top: 10px;
text-align: center;
width: 950px;
}

Google Maps on Dojox mobile view

The same question has been asked in this post, but the accepted answer doesn't help (me, at least).
I use dojox.mobile.View to display two views that look like this. Everything works fine, except the map container doesn't get displayed correctly. It is shown as a small box on the top page. Do I miss something on the layout file? Thank you!
<div id="view1" dojoType="dojox.mobile.View" selected="true">
<h1 dojoType="dojox.mobile.Heading">View 1</h1>
<ul dojoType="dojox.mobile.RoundRectList">
<li dojoType="dojox.mobile.ListItem" icon="images/icon1.png" moveTo="view2" transition="slide">Go To View 2
</li>
</ul>
</div>
<div id="view2" dojoType="dojox.mobile.View" style="height:100%">
<h1 dojoType="dojox.mobile.Heading" back="View 1" moveTo="view1">View 2</h1>
<div dojoType="dojox.mobile.RoundRect" id="map_canvas" style="width:100% !important;height:100% !important;"></div>
</div>
Update:
<body style="visibility: visible;">
<div id="view1" class="mblView" selected="true" style="visibility: visible; width: 100%; height: 100%; top: 0px; left: 0px; display: none;" dojotype="dojox.mobile.View" widgetid="view1">
<div id="view2" class="mblView" style="visibility: visible; width: 100%; height: 100%; top: 0px; position: relative; left: 0px;" dojotype="dojox.mobile.View" widgetid="view2">
<h1 id="dojox_mobile_Heading_1" class="mblHeading mblHeadingCenterTitle" moveto="view1" back="View 1" dojotype="dojox.mobile.Heading" style="" widgetid="dojox_mobile_Heading_1">
<div id="map_canvas" class="mblRoundRect" style="width: 100% ! important; height: 100% ! important; position: relative; background-color: rgb(229, 227, 223); overflow: hidden;" dojotype="dojox.mobile.RoundRect" widgetid="map_canvas">
<div style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 100%; height: 100%; z-index: 0;">
Firebug logs
I had similar display problem with Dojo mobile + Google maps api version 3.
Simons solution did not work, but there was another way.
I don't create new topic, just give you this simple hint: Always check if Google maps loads AFTER DOM (for example using require(["dojo/domReady!"], function(){ ... })
the mobile view your using for the map view only has height:100% set where as the example has width + height 100%.
This can cause issues inside the div used for the map as its not picking up a width correctly. (i've seen a similar issue like this before, could be something else though)
EDIT:
Nothing pops out to me. Have you tried maybe using script to modify it ? something like:
var div = dojo.byId("map_canvas");
div.style.height = window.innerHeight+"px";
div.style.width = window.innerWidth+"px";

Resources