Responsive Video Containers
Permalink Browser Info Environment
I found inserting a responsive, non-full-width video rather difficult. I tried wrapping a YouTube iframe in an HTML block with FitVids.js, and I tried extra CSS on the block, but just couldn't get it to work.
I finally hit on usinghttp://www.concrete5.org/marketplace/addons/vimeo/... with a few modifications.
First, followhttp://www.concrete5.org/marketplace/addons/vimeo/documentation/... and create your own copy of the template.
Then modify line 14 of view.php fromto
You can also tweak the embedded player on line 16. The block automatically extracts the video URL, so putting all the options into the block's own dialog doesn't work, unfortunately. Changing the block's input options is probably the proper way to fix this, but I'm not that skilled. So I removed some of the decorations and changed the title text color like this (line 16):
I also edited the first section of view.css to get less than full width. Previouslybecame
(The odd percentages are exactly 16:9 to avoid any black bars). You can see the above live at the time of this writing athttp://wyattbest.com.
I finally hit on usinghttp://www.concrete5.org/marketplace/addons/vimeo/... with a few modifications.
First, followhttp://www.concrete5.org/marketplace/addons/vimeo/documentation/... and create your own copy of the template.
Then modify line 14 of view.php from
<div id="vimeo-player-<?php echo $playerID;?>" class="vimeo-embed-container">
<div style="margin-left: auto; margin-right: auto;" id="vimeo-player-<?php echo $playerID;?>" class="vimeo-embed-container">
You can also tweak the embedded player on line 16. The block automatically extracts the video URL, so putting all the options into the block's own dialog doesn't work, unfortunately. Changing the block's input options is probably the proper way to fix this, but I'm not that skilled. So I removed some of the decorations and changed the title text color like this (line 16):
<iframe src="http://player.vimeo.com/video/<?php echo $videoID;?>?byline=0&portrait=0&color=b6cddb"
I also edited the first section of view.css to get less than full width. Previously
.vimeo-embed-container { position: relative; padding-bottom: 58%; height: 0; }
.vimeo-embed-container { position: relative; padding-bottom:30.6%; width: 54.4%; height: 0; }
(The odd percentages are exactly 16:9 to avoid any black bars). You can see the above live at the time of this writing athttp://wyattbest.com.
| Type: | Discussion |
|---|---|
| Status: | New |
