TYPO3 News Embeded youtube video with related link in fluid - typo3

I use TYPO3 news related link to embed a Youtube video.
In fluid I have use this code:
f:format.htmlspecialchars()} src="{relatedLink.uri}" width="480">
The result is: <iframe allowfullscreen="" frameborder="0" height="270" title="Test video title src=" https:="" www.youtube.com="" embed="" 0ofotivopuo?ecver="1"" width="480"></iframe>
You can see that src have a link with no slashes.
When i debug the same variable {relatedLink.uri} in a tag i get the right url like this : https://www.youtube.com/embed/0oFotIvOpUo?ecver=1
Can anybody give an idea how to fix it ?

The missing quote after title="{relatedLink.title -> f:format.htmlspecialchars()} is probably the reason for your problem.
Fixed version:
<iframe allowfullscreen="" frameborder="0" height="270" title="{relatedLink.title -> f:format.htmlspecialchars()}" src="{relatedLink.uri}" width="480"></iframe>

Related

embedd youtube video without share option

I have an iPhone app where I am playing youtube videos.
I have tableview where I am listing all videos.
I am using below code to play youtube vide.
<html><style>iframe {position:absolute;top:0px;left:0px;}</style>
<body>
<iframe src='http://www.youtube.com/embed/rxSwgvMg-H4?rel=0&html5=1' width='100' height='75' frameborder='0' >
</iframe>
</body>
</html>
All is working fine.
However client is insisting to remove share and text of video that are coming on the top.
Any idea how can I get this done?
try this code
<iframe src='http://www.youtube.com/embed/rxSwgvMg-H4?modestbranding=1&showinfo=0&fs=0' width='300' height='175' frameborder='0' >
</iframe>
working link:
http://jsfiddle.net/Bh4ac/
Remove Red color from play button:
<center><iframe src="https://www.youtube.com/embed/HAR49CWiEjY?modestbranding=1&title=&autoplay=0&re l=0&controls=0" type=”application/x-shockwave-flash” frameborder="0" width="600" height="400"></iframe></center>

Facebook Like Box only works in one browser

I have been trying to get a like box on a website that works for more than one browser (chrome) and I can't seem to make it work. I've tried FireFox, Safari, IE and nothing. I could get the default Like Box example to work no problem, but when I use the following code nothing:
<iframe src="https://www.facebook.com/plugins/likebox.php?id=114521595255240&width=292&height=300&show_faces=false&colorscheme=light&stream=true&border_color&header=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:300px;" allowTransparency="true"></iframe>
I also tried:
<iframe src="https://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Forlaborersapprenticeship&width=292&height=427&show_faces=false&colorscheme=light&stream=true&border_color&header=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:427px;" allowTransparency="true"></iframe>
I tried with http: and https:. I tried with & inplace of &any help would be greatly appreciated.
Thanks
Mike
Try doing this
<div class="fb-like-box"
data-href="https://www.facebook.com/yourfacebookpage"
data-width="462"
data-height="400"
data-show-faces="false"
data-colorscheme="dark"
data-stream="true"
data-border-color="#333333"
data-header="false">
</div>
Make sure the page is live and has content. If there are no active posts, browsers won't have any content to pull and so won't show the like box. Also, try coding the & to the full html code of &, that helped me.

Facebook Social Plugin Size

I have a standard facebook plugin on my webpage. But though the size is specified, on various occasions (e.g. the PC is not logged in) the text overflows - ignoring the overflow:hidden. In simple words: it does not what it should do. Here goes the code:
<iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages%2FKLARTEXT%2F207788969239606%3Fref%3Dhl&send=false&layout=standard&width=250&show_faces=false&font=verdana&colorscheme=light&action=like&height=30" scrolling="no" frameborder="0" style="border:none; align:"middle"; overflow:hidden; width:250px; height:30px;" allowTransparency="true"></iframe>
Any ideas?
Can you point us to some specific examples? There were some bugs recently causing social plugins to bleed over their divs. According to the bug tracker these should be fixed by now:
https://developers.facebook.com/bugs/500201816697073
https://developers.facebook.com/bugs/409142149161197
You can always help yourself by putting the social plugin inside another div with overflow:hidden:
<div style="overflow:hidden;width:300px;height:100px;">
<div class="fb-like" data-href="..."/>
</div>

Adding <iframe> into TinyMCE breaks the page layout

When I paste the iframe code directly into the source code view of TinyMCE and click save it changes the code to:
View TinyMCE code after saving adds </p>
<iframe src="http://maps.google.co.uk/maps" width="425" height="350" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></p></iframe>
View HTML source of HTML page:
<iframe src="http://maps.google.co.uk/maps" width="425" height="350" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"/>
Original iframecode
<iframe src="http://maps.google.co.uk/maps" width="425" height="350" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
This is effecting the rest of the page layout and breaks the footer.
I am using Silverstripe 2.4.5 if this helps.
TinyMCE is not too much of an iframe fan. There are at least three (more or less) quick fixes:
If it's only for Google maps and always at a fixed position, you can use the Addressable module: http://deadlytechnology.com/silverstripe/google-map-module/
If it's only for Google maps but just anywhere in the $Content field, you might want to try short codes: http://www.ssbits.com/tutorials/2010/2-4-using-short-codes-to-embed-a-youtube-video/
Fix TinyMCE's mess on the server side within the onBeforeWrite() method: http://www.silverstripe.org/general-questions/show/16438#post305472
If you can use 2., take a look at a complete example:
PHP code: https://github.com/xeraa/silverstripe-book/blob/master/chapter-06/mysite/code/Page.php#L42
Template: https://github.com/xeraa/silverstripe-book/blob/master/chapter-06/mysite/templates/Includes/GMap.ss
Actually the easiest solution is in the TinyMCE click the little HTML icon (next to the anchor) and then paste the iframe code there. This way it will not replace the html tags to </p>

How to successfully embed a youtube video on facebook application tab

I have created simple facebook app. I have a profile tab(for facebook pages) where I have embed a youtube video.
<fb:swf swfbgcolor="000000" imgstyle="border-width:3px; border-color:white;" swfsrc='http://www.youtube.com/v/xxxxxxxxxx' imgsrc='http://img.youtube.com/vi/xxxxxxxxxx/2.jpg' width='340' height='270' />
The image appears fine. But onclick It does not play the video.
I appreciate any help.
Thanks.
in order to achieve that you have to correctly replace the swfsrc attribute value with the one of the youtube video you want.
open the youtube video link, click on the embed button and look at the first <param name="movie" value="http://www.youtube.com/v/cNgf6fd88g8?fs=1&hl=en_US"></param> tag. copy that value (without the query string) and paste it on your swfsrc attribute value. that's all. enjoy ;)
<iframe
id="yt"
src="//www.youtube.com/embed/i8h9_2Ph5VY/?wmode=opaque&version=3&theme=dark&width=810&height=456&autoplay=0&rel=0&showinfo=0&iv_load_policy=3&&vq=hd720&hd=1&html5=1&enablejsapi=1&playerapiid=main"
frameborder="0"
scrolling="no"
allowfullscreen="true"
webkitallowfullscreen="true"
mozallowfullscreen="true"
style="width: 810px; height: 456px;">
</iframe>