Skip to content

Instantly share code, notes, and snippets.

@vlado
Last active May 8, 2017 17:37
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save vlado/5625916 to your computer and use it in GitHub Desktop.
Save vlado/5625916 to your computer and use it in GitHub Desktop.
How to embed youtube video in Rails view
<%
video_code, video_width, video_height = 'nkYA1xqrdGw', 938, 555
video_embed_params = { :fs => 1, :rel => 0, :hd => 1, :autoplay => 1, :modestbranding => 1, :version => 3, :enablejsapi => 1, :playerapiid => "ytplayer" }
player_wrapper_id, player_id = 'ytPlayerWrapper', 'ytPlayer'
%>
<% unless mobile_safari_request? %>
<% content_for :head do %>
<%= javascript_include_tag "http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js" %>
<% end %>
<script type="text/javascript">
$(function() {
$(".how_it_works_video a.how_it_works_link").one('click', function() {
$("#<%= player_wrapper_id %>").show();
$(".how_it_works_video a").hide();
swfobject.embedSWF("http://www.youtube.com/v/<%= video_code %>?<%= video_embed_params.to_query %>", "<%= player_wrapper_id %>", "<%= video_width %>", "<%= video_height %>", "8", null, null, { allowScriptAccess: "always" }, { id: "<%= player_id %>" });
return false;
});
});
var ytPlayer;
var forceHD = true;
function onYouTubePlayerReady(playerId) {
ytPlayer = document.getElementById("<%= player_id %>");
ytPlayer.addEventListener("onStateChange", "onYtPlayerStateChange");
}
function onYtPlayerStateChange(newState) {
if (forceHD && newState === 3) { // we force HD only initially if user switch to something else we don't force it any more
ytPlayer.setPlaybackQuality( 'hd720' );
forcedHD = false;
}
}
</script>
<% end %>
<section class="how_it_works_video">
<div style="width:<%= video_width %>px;height:<%= video_height %>px">
<%= link_to content_tag(:span)+image_tag("how_it_works_thumb.jpg"), "http://www.youtube.com/v/#{video_code}", :class => "how_it_works_link" %>
<div id="<%= player_wrapper_id %>" style="display:none"></div>
</div>
</section>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment