Menu icon Foundation

Designer

My Posts




My Comments

James Lanman commented on Stewart's post almost 2 years

It would be great if Zurb published a codepen for best practices when using Youtube or Vimeo videos with the Reveal Modal. It's pretty frustrating trying to get this to work. @Wikus solution was brilliant but only for one video. I have a template part that calls the same video in two different places and it lead to the video playing twice simultaneously only a second apart. After hours and hours of searching super outdated solutions on Stack Exchange I decided to call up a Youtube video iframe via their API then use the F6(this is key) Wikus mentioned to create start and stop events on close and opening reveal. Seems silly to build a framework aimed at saving dev time only to leave such a common UI use case to the wild. Unless I'm missing something. Hope this saves someone a bunch of time. Please let me know if there is a better way to do this. 
 
<script>
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');

  tag.src = "https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  // 3. This function creates an &lt;iframe&gt; (and YouTube player)
  //    after the API code downloads.
  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      height: '390',
      width: '640',
      videoId: 'YOURID GOES HERE; the numbers AFTER https://www.youtube.com/embed/',
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
  }

  // 4. The API will call this function when the video player is ready.
  function onPlayerReady(event) {
    event.target.stopVideo();

// I changed the event.target above from startVideo to stopVideo. When the player is ready I don't want it to start until I open reveal. Key change here.
}

  // 5. The API calls this function when the player's state changes.
  //    The function indicates that when playing a video (state=1),
  //    the player should play for six seconds and then stop.
  var done = false;
  function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING &amp;&amp; !done) {

// I DELETED THEIR CODE HERE IN THE SAMPLE TO STOP THE VIDEO AFTER 6 SECONDS... BECAUSE WTF?! WHAT USE CASE DOES THAT SATISFY?
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
</script>
<script>
// This tells the Youtube Video to start and stop respectively when reveal opens or closes. Note that Foundation 6 has a new way to bind these events so make sure you're not using outdated JS from older version!
$(document).on('closed.zf.reveal', '[data-reveal]', function () {
player.stopVideo();
});
$(document).on('open.zf.reveal', '[data-reveal]', function () {
player.playVideo();
});
</script>

James Lanman commented on Frederic Bouin's post almost 2 years

Thank you! That was driving me nuts.

James Lanman commented on Ole Fredrik Lie's post over 3 years

Ole,
 
Thank you once again for this amazing boilerplate! I was wondering what the best way to keep all post thumbnails to a specific aspect ratio would be, like 5:4 for instance? Right now I have a page showing all the post thumbnails and one of the images is taller which breaks Foundation's columns.Would like to make it so images of all sizes are cropped to a certain aspect ratio so they never break the grid. In Functions you reference responsive-images.php. I see the following code which seems to hard crop widths. How do I add heights to this? Am I approaching this wrong? 
 
// Add custom image sizes attribute to enhance responsive image functionality for content images
function foundationpress_adjust_image_sizes_attr( $sizes, $size ) {

// Actual width of image
$width = $size[0];

// Full width page template
if ( is_page_template( 'page-templates/page-full-width.php' ) ) {
1200 < $width && $sizes = '(max-width: 1199px) 98vw, 1200px';
1200 > $width && $sizes = '(max-width: 1199px) 98vw, ' . $width . 'px';

// Default 3/4 column post/page layout
} else {
770 < $width && $sizes = '(max-width: 639px) 98vw, (max-width: 1199px) 64vw, 770px';
770 > $width && $sizes = '(max-width: 639px) 98vw, (max-width: 1199px) 64vw, ' . $width . 'px';
}

return $sizes;
}
add_filter( 'wp_calculate_image_sizes', 'foundationpress_adjust_image_sizes_attr', 10 , 2 );

James Lanman commented on James Lanman's post over 3 years

@dominik Thank you so much! It's more than okay that you're not Rafi. ;D. I really appreciate this - very helpful.

James Lanman commented on James Lanman's post over 3 years

@rafi bump. Any insight?

James Lanman commented on James Lanman's post over 3 years

Hey Rafi! Thanks for responding. New time I'll start with a codepen. Here is the codepen that demonstrates the behavior I am talking about. Notice the dark overlay doesn't transition even though it is specified. The shift to overlay is instantaneous on clicking the hamburger but it should be gradual as specified in the CSS, no? Maybe I'm missing something obvious. I appreciate your help on this matter regardless!
 
http://codepen.io/jackoftrades/pen/zqPRye
 

James Lanman commented on James Lanman's post about 4 years

Rafi - I appreciate you taking the time to make that codepen. I'm already able to do that animation and I'm already able to do a tooltip that counts the percentage via two different scripts executing simultaneously. but the classes are all custom and I think there is a more efficient way to run the scripts.

Even if you could just tell me the best way to do the tooltips similar to that codepen link I would appreciate it. Because I have made my own but would like to stay within the Foundation toolset for consistencies. Cheers!

James Lanman commented on Mayur Ahir's post over 4 years

@eric banico

Could you explain how this is done if you know? Would save me some serious digging but yes, this is exactly what we are looking for (at least I am). Thanks!

Posts Followed




Following

    No Content

Followers

My Posts

My Comments

You commented on Stewart's post almost 2 years

It would be great if Zurb published a codepen for best practices when using Youtube or Vimeo videos with the Reveal Modal. It's pretty frustrating trying to get this to work. @Wikus solution was brilliant but only for one video. I have a template part that calls the same video in two different places and it lead to the video playing twice simultaneously only a second apart. After hours and hours of searching super outdated solutions on Stack Exchange I decided to call up a Youtube video iframe via their API then use the F6(this is key) Wikus mentioned to create start and stop events on close and opening reveal. Seems silly to build a framework aimed at saving dev time only to leave such a common UI use case to the wild. Unless I'm missing something. Hope this saves someone a bunch of time. Please let me know if there is a better way to do this. 
 
<script>
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');

  tag.src = "https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  // 3. This function creates an &lt;iframe&gt; (and YouTube player)
  //    after the API code downloads.
  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      height: '390',
      width: '640',
      videoId: 'YOURID GOES HERE; the numbers AFTER https://www.youtube.com/embed/',
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
  }

  // 4. The API will call this function when the video player is ready.
  function onPlayerReady(event) {
    event.target.stopVideo();

// I changed the event.target above from startVideo to stopVideo. When the player is ready I don't want it to start until I open reveal. Key change here.
}

  // 5. The API calls this function when the player's state changes.
  //    The function indicates that when playing a video (state=1),
  //    the player should play for six seconds and then stop.
  var done = false;
  function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING &amp;&amp; !done) {

// I DELETED THEIR CODE HERE IN THE SAMPLE TO STOP THE VIDEO AFTER 6 SECONDS... BECAUSE WTF?! WHAT USE CASE DOES THAT SATISFY?
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
</script>
<script>
// This tells the Youtube Video to start and stop respectively when reveal opens or closes. Note that Foundation 6 has a new way to bind these events so make sure you're not using outdated JS from older version!
$(document).on('closed.zf.reveal', '[data-reveal]', function () {
player.stopVideo();
});
$(document).on('open.zf.reveal', '[data-reveal]', function () {
player.playVideo();
});
</script>

You commented on Frederic Bouin's post almost 2 years

Thank you! That was driving me nuts.

You commented on Ole Fredrik Lie's post over 3 years

Ole,
 
Thank you once again for this amazing boilerplate! I was wondering what the best way to keep all post thumbnails to a specific aspect ratio would be, like 5:4 for instance? Right now I have a page showing all the post thumbnails and one of the images is taller which breaks Foundation's columns.Would like to make it so images of all sizes are cropped to a certain aspect ratio so they never break the grid. In Functions you reference responsive-images.php. I see the following code which seems to hard crop widths. How do I add heights to this? Am I approaching this wrong? 
 
// Add custom image sizes attribute to enhance responsive image functionality for content images
function foundationpress_adjust_image_sizes_attr( $sizes, $size ) {

// Actual width of image
$width = $size[0];

// Full width page template
if ( is_page_template( 'page-templates/page-full-width.php' ) ) {
1200 < $width && $sizes = '(max-width: 1199px) 98vw, 1200px';
1200 > $width && $sizes = '(max-width: 1199px) 98vw, ' . $width . 'px';

// Default 3/4 column post/page layout
} else {
770 < $width && $sizes = '(max-width: 639px) 98vw, (max-width: 1199px) 64vw, 770px';
770 > $width && $sizes = '(max-width: 639px) 98vw, (max-width: 1199px) 64vw, ' . $width . 'px';
}

return $sizes;
}
add_filter( 'wp_calculate_image_sizes', 'foundationpress_adjust_image_sizes_attr', 10 , 2 );

You commented on James Lanman's post over 3 years

@dominik Thank you so much! It's more than okay that you're not Rafi. ;D. I really appreciate this - very helpful.

You commented on James Lanman's post over 3 years

@rafi bump. Any insight?

You commented on James Lanman's post over 3 years

Hey Rafi! Thanks for responding. New time I'll start with a codepen. Here is the codepen that demonstrates the behavior I am talking about. Notice the dark overlay doesn't transition even though it is specified. The shift to overlay is instantaneous on clicking the hamburger but it should be gradual as specified in the CSS, no? Maybe I'm missing something obvious. I appreciate your help on this matter regardless!
 
http://codepen.io/jackoftrades/pen/zqPRye
 

You commented on James Lanman's post about 4 years

Rafi - I appreciate you taking the time to make that codepen. I'm already able to do that animation and I'm already able to do a tooltip that counts the percentage via two different scripts executing simultaneously. but the classes are all custom and I think there is a more efficient way to run the scripts.

Even if you could just tell me the best way to do the tooltips similar to that codepen link I would appreciate it. Because I have made my own but would like to stay within the Foundation toolset for consistencies. Cheers!

You commented on Mayur Ahir's post over 4 years

@eric banico

Could you explain how this is done if you know? Would save me some serious digging but yes, this is exactly what we are looking for (at least I am). Thanks!

Posts Followed

Following

  • No Content

Followers

  • No Content