Has anyone experienced any trouble embedding youtube videos into the Foundation 5 large-3 columns class?
<div class="large-3 columns">
<p>
<img src="http://example.com/large.png?111"><br />
</p>
</div>
This class css is as follows:
media="all"
#media only screen and (min-width: 64.063em)
.large-3 {
position: relative;
width: 25%;
}
I used the same for a youtube embed, and it distorted it terribly. Any suggestions?
There is a special component in ZURB Foundation called flex-video that you can use to create responsive YouTube (and Vimeo) embeds. Here is an example:
<div class="flex-video widescreen">
<iframe width="560" height="315" src="https://www.youtube.com/embed/LyszBoO_r7Y" frameborder="0" allowfullscreen></iframe>
</div>
You can also use a Vimeo video embed by adding the .vimeo class. These are also avaialble via the Sass Mixins and can be applied to any existing class or element in CSS by using #include flex-video-container();
NOTE: this also works for the latest version, ZURB Foundation for Sites v6.
YouTube videos require special handling to become responsive but there's a solution! Use FitVids.js: https://github.com/davatron5000/FitVids.js
Related
I am experiencing a weird issue with iframes displayng on some phones and not displaying on some phones.
(Displays on all androids)
(Does not work on iphone 6,7 but works on 7 plus and the 7S and a few other iphones)
<div class="col-lg-6 col-md-6">
<iframe src='http://app.brandyourcar.com/signup/index/form-main-display-group-thingy' style='border: 0;' width='100%' height='770px' scrolling='no'></iframe>
</div>enter code here
I have tried a lot of the solutions on Stack and none seem to work for me.
few examples :1.) <div id="scroller" style="height: 400px; width: 100%; overflow: auto;">
<iframe height="100%" id="iframe" scrolling="no" width="100%" id="iframe" src="url" />
</div>
2.) <div id="scroller" style="height: 400px; width: 100%; overflow: auto;">
<iframe height="100%" id="iframe" scrolling="no" width="100%" id="iframe" src="data/testdocument.pdf" />
</div>
and many other Java script solutions.
This happens because the latest versions of safari have a new security feature called "prevent cross site tracking" enabled by default that doesn't allow the third party cookies. The user can disable this, but I'm trying to find a workaround to avoid the user intervention. For now, you can detect if the third party cookies are allowed and if not you can display an alert message saying how to disable this feature.
I hope it helps.
I wanna learn how you guys can implement an embedded youtube video of personalize dimensions. I searched on Google "how to" and I tried some of the tips, but still not working. Can you help me ?
Create a new file index.html. Open it with your text editor (e.g., Notepad). Add the following to it:
<!DOCTYPE html>
<html>
<body>
<h1>My Embeded YouTube video</h1>
<iframe width="1280" height="720" src="https://www.youtube.com/embed/bWPMSSsVdPk" frameborder="0" allowfullscreen></iframe>
</body>
</html>
Change width="1280" and height="720" to the desired number of pixels. Change "https://www.youtube.com/embed/bWPMSSsVdPk" to whatever youtube video you want. For instance, if you'd like to change it to the following video: https://www.youtube.com/watch?v=ohr6O78jGzs
Just switch bWPMSSsVdPk to ohr6O78jGzs in the "https://www.youtube.com/embed/bWPMSSsVdPk" part, such that "https://www.youtube.com/embed/ohr6O78jGzs". Just note that not all videos are embeddable.
Open index.html with a browser. Just drag and drop it into the browser window.
Should do the trick.
I have tried to embed the video as shown below on my asp.net mvc app.
<div class="col-lg-12 center " data-animation="bounceInRight" data-delay="300">
<iframe width="170" height="128" ng-src="https://www.youtube.com/embed/watch?v=1aDLYFBuWc8" frameborder="0" allowfullscreen style="max-width:100%; margin:0 auto; display:block;"></iframe>
</div>
But when I tried to play, it shows below error.
There is no console window errors.When I tried to get the url by right clicking the above video then it shows this : https://youtu.be/undefined
But when I embeded below kind of url then it works fine.
https://www.youtube.com/embed/A6XUVjK9W4o
Could you tell me how to sort out this issue ? Thanks in advance.
Answer :
I think I can avoid this issue if I use the Video_Id as #Jossef Harush mentioned below.
Using ng-src in redundant
Since you don't dynamically set the video url in your example. no need to use ng-src
ng-src - http://plnkr.co/edit/HfJRVtt1Qga5UgyU242u?p=preview
src - http://plnkr.co/edit/LROnn8jHak1P8Hk4bR7e?p=preview
YouTube Embed URL is incorrect
from they're docs:
Embed a player using an tag
Define an tag in your application in which the src URL
specifies the content that the player will load as well as any other
player parameters you want to set. The tag's height and width
parameters specify the dimensions of the player.
If you create the element yourself (rather than using the
IFrame Player API to create it), you can append player parameters
directly to the end of the URL. The URL has the following format:
http://www.youtube.com/embed/VIDEO_ID
use https://www.youtube.com/embed/A6XUVjK9W4o
instead of https://www.youtube.com/embed/watch?v=1aDLYFBuWc8
Sample on Plunker
go to the wanted Youtube video and click on Share then you will get the option for a code snippet which you can embed into your code.
This is the default from yt
<iframe width="420" height="315" src="Link here" frameborder="0" allowfullscreen></iframe>
Bad url and you can't use ng-src try this:
<div class="col-lg-12 center " data-animation="bounceInRight" data-delay="300">
<iframe width="170" height="128" src="https://www.youtube.com/embed/1aDLYFBuWc8?rel=0" frameborder="0" allowfullscreen="" style="max-width:100%; margin:0 auto; display:block;"></iframe>
</div>
http://jsfiddle.net/6w3ao4ft/
Am using code provided by Google Developers to add Youtube button to website. When button is activated and the link to Youtube is made, I get a message on Youtube that "The channel does not exist."
See following code:
<script src="https://apis.google.com/js/platform.js"></script>
<div class="g-ytsubscribe" data-channelid="UC73r_CJEG-2kH6VY1lW7gIQ" data-
layout="default" data-count="hidden"></div>
Have also tried i frame api:
<iframe data-gapiattached="true" frameborder="0" scrolling="no" height="25px"
width="174px" style="padding-right: 10px"
src="http://www.youtube.com/subscribe_embed?bsv&usegapi=1&channel=UC73r_CJEG-
2kH6VY1lW7gIQ">
</iframe></h6>
<div align="center">
<script src="https://apis.google.com/js/platform.js"></script>`
With i frame api, web page shows Youtube icon with an exclamation point and the word "Error".
Am using Dreamweaver CS5 and Safari.
If i understood the code, you want generate a suscriber button.
you can see this doc:
https://developers.google.com/youtube/youtube_subscribe_button?hl=nl
This code Work for me.
<script src="https://apis.google.com/js/platform.js"></script>
<div class="g-ytsubscribe" data-channelid="UC73r_CJEG-2kH6VY1lW7gIQ" data-layout="default" data-count="default"></div>
http://jsfiddle.net/carlosrojas_o/9LLzjd7h/
I need to add the following contents inside a panel in sencha touch2
Tweet
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
But it is just rendering
<div class="x-innerhtml " id="ext-element-156">Tweet <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="http://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></div>
instead of
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/tweet_button.1352365724.html#_=1353049473087&count=horizontal&dnt=true&id=twitter-widget-0&lang=en&original_referer=http%3A%2F%2Flocalhost%2Fmyapp%2Fchannel.html&size=l&text=Check%20out%20for%20more......&url=http%3A%2F%2Flocalhost%2Fmyapp%2Fchannel.html" class="twitter-share-button twitter-count-horizontal" style="width: 136px; height: 28px; " title="Twitter Tweet Button" data-twttr-rendered="true"></iframe>
<script id="twitter-wjs" src="//platform.twitter.com/widgets.js"></script>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
I am using the following code in sencha
var tweetbtn = {
xtype: 'panel',
name: 'tweetbtn',
id:"tweetbtn",
width:100,height:100,
html:'Tweet<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="http://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>',
} ;
Anything I missed out ?
You cannot add tags to html properties as you have shown above. All the javascript is really doing is loading the external Twitter javascript file and appending it to your element. You should really just utilize the loadScriptFile function (http://docs.sencha.com/touch/2-1/#!/api/Ext.Loader-method-loadScriptFile) once the panel is rendered to load the external Twitter file.