Embed Youtube Video into Rails App - ruby-on-rails

When I put
<iframe width="560" height="349" src="<%= #video.link %>"></iframe>
Everything shows up fine. But the actual video won't play.. what am I doing wrong?
<iframe width="560" height="349" src="http://youtu.be/PF9-lstnLvo">
<html lang="en" dir="ltr">
</iframe>
HELP!!

Wrong src at iframe, it need to be like:
http://www.youtube.com/embed/PF9-lstnLvo
You need to add code:string to you Video model.
Or method code, which return you this code from #video.link like this:
def code
self.link.split('/').last if self.link
end
And replace erb:
<iframe width="560" height="349" src="<%= "http://www.youtube.com/embed/"+#video.code %>"></iframe>

Related

Display PDF's uploaded with paperclip

I upload files (PDF's only) using paperclip and now want to display these as a PDF in a view.
This gives me an empty frame <iframe src="<% #document.file %>"></iframe>
This results in an image <%= image_tag #document.file(:large) %>
the files are stored in postgress.
You have an syntax "issue":
<iframe src="<% #document.file %>"></iframe>
Should be
<iframe src="<%= #document.file %>"></iframe>
<!-- notice the equals symbol (=) -->
<!-- which prints something into erb file. -->
Also, I believe you need to use it's url, so I'd be something like this:
<iframe src="<%= #document.file.url(:large) %>"></iframe>
More info - What is the difference between <%, <%=, <%# and -%> in ERB in Rails?
<iframe src= <%= #document.url.html_safe %> width="595" height="485" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;" allowfullscreen> </iframe>
https://scalified.com/2018/01/16/injecting-pdf-html-page/

ERB code is breaking the lines of code after it

I used the following code in my show.html.erb file to load a youtube video. The video loads but any code after this is not executing.
<p>
<iframe id="ytplayer" type="text/html" width="640" height="390"
src="http://www.youtube.com/embed/<%=#video.youtubeid%>"
frameborder="0"/>
</p>
Change it to
<p>
<iframe id="ytplayer" type="text/html" width="640" height="390"
src="http://www.youtube.com/embed/<%=#video.youtubeid%>"
frameborder="0">
</iframe>
</p>
Refer this post
You should be able to use the <%= 'no line break' -%> syntax, as in:
<iframe id="ytplayer" type="text/html" width="640" height="390"
src="http://www.youtube.com/embed/<%= #video.youtubeid -%>"
frameborder="0">
</iframe>
Notice the extra dash at the end -%>

How to hide <iframe> if the embedded video url is blank in rails app ?

This must be very simple. But I just can't seem to find the proper solution.
I have a model with an embedded video attribute.
I made it happen like this:
On my show page
<iframe width="560" height="315" src="<%= #trip.youtube %>" frameborder="0" allowfullscreen></iframe>
Everything works fine, but the thing is that i don't want to show this part if the youtube url is blank. Otherwise I am left with a huge white space, which I don't need.
I've tried to play around with unless or if conditions
<% if #trip.youtube.blank? %>
<iframe width="0" height="0" src="<%= #trip.youtube %>" frameborder="0" class="hidden" allowfullscreen></iframe>
<% else %>
<iframe width="560" height="315" src="<%= #trip.youtube %>" frameborder="0" allowfullscreen></iframe>
<% end %>
But I'm doing something wrong.
Any suggestions for a better way ?
Thanks.
Why not just use:
<% if #trip.youtube.present? %>
<iframe width="560" height="315" src="<%= #trip.youtube %>" frameborder="0" allowfullscreen></iframe>
<% end %>
And leave it at that?
aaa... such a dumb mistake.
In my _form I had:
<div class="field">
<%= f.label :youtube %><br />
<%= f.text_field :youtube,:value => 'http://' %><br />
</div>
Since the field had already - http://, either way, with or without youtube url, rails didn't identify it as blank :))
needs to be simply:
<div class="field">
<%= f.label :youtube %><br />
<%= f.text_field :youtube %><br/>
</div>
and
<% if #trip.youtube.present? %>
<iframe width="560" height="315" src="<%= #trip.youtube %>" frameborder="0" allowfullscreen></iframe>
<% end %>
Works like a charm. Thanks :)

Open any video via jQuery UI modal on click?

I have a site that will have several Youtube videos embedded using the standard Youtube iframe code.
I would like for these to be triggered via text link such as:
<p>Click Here to watch a puppy do something.</p>
<iframe width="420" height="315" src="http://www.youtube.com/embed/1AH9VEM_qC0?rel=0" frameborder="0" allowfullscreen></iframe>
Where the iframe is hidden by default but when the link is clicked the video shows in a jQuery UI modal window.
There will be multiple videos on a page.
Any direction is appreciated.
jsFiddle: http://jsfiddle.net/2Ur9M/38/
<div id="vid1" class="play">vid1</div>
<div id="vid2" class="play">vid2</div>
<div id="vid3" class="play">vid3</div>
<div id="ifvid1" style="display:none">1<iframe width="420" height="315" src="" frameborder="0" allowfullscreen></iframe></div>
<div id="ifvid2" style="display:none">2<iframe width="420" height="315" src="" frameborder="0" allowfullscreen></iframe></div>
<div id="ifvid3" style="display:none">3<iframe width="420" height="315" src="" frameborder="0" allowfullscreen></iframe></div>
<script>
$(function()
{
$(".play").each( function( index )
{
$(this).click( function()
{
$("#if"+$(this).attr("id")).dialog(
{
modal: true
});
});
});
});
</script>

ASP.Net MVC, How to set an image from an action link as <div> background?

I have an image from an Url.Action, like this
<img src="<%= Url.Action("Image") %>" alt="" />
How can I set this image as a background to a div? I tried this:
<div style="background-image:url(/Background/Image)"></div>
and others, but no success, I'm trying to play with JS over that div, and I need that background.
Try using Url.Content. I was recently trying to do the same thing for my JavaScript files and I found out about Url.Content from this blog.
<script src="<%= Url.Content("~/Scripts/packed.js") %>"></script>
For your DIV, I'd do (shortened for readability):
<div style="background-image:url(<%= Url.Content("~/Bkd/img.jpg") %>)"></div>

Resources