I remember seeing a thread about placing a You Tube video on a responsive page but I can’t find it again. Can anyone shed some light please. I think it used Crowbar action or a mark up item.
Regards
Trevor
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
http://www.freewaytalk.net/thread/view/152008#m_152013
D
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Hi Dave
That looks like the thread OK. It mentions copying the YT code and pasting it. I can’t see any source code link there. Where do I access this code to paste into the mark up or crowbar action?
T
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Where do I access this code to paste into the mark up or crowbar action?
On YouTube - there is a section that tells you the sharing/embed code.
D
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
AH thanks Dave I will take a look at that - in the morning!
T
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Something not quite right. Test here:
http://www.trevormckay.co.uk/TestTube/
The Video box is clipped at the bottom and the video does not seem to be responsive.
Trev
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
When you copied the code did you use the specific dimensions that were part of the code?
Because if you use specific sizes that is what you will get.
D
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Yes I just copied what was there. I will try deleting the size.
T
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
OK when I delete the size in the YouTube Code the movie seems to default to a small size. What I am trying to replicate is Caleb’s example of a responsive YouTube movie - here:
http://backdraft.onrampwebdesign.com/layouts.html
I suspect this must have something to do with the box sizing action that will not work with FW7. Is there a work around in meantime?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Trev - how did you actually add the youTube video to your page?
I would try this
Create/choose the Div that will hold your video
Add the Crowbar action to that Div (which you will size as a % of your page width.
In the Add to Beginning section paste in the iframe code for your vid- something like:
<iframe width="100%" height="auto" src="http://www.youtube.com/embed/aBYEO0qwp3s" frameborder="0" allowfullscreen></iframe>
Put it online and I will give you some more code to help sizing.
D
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Caleb’s example uses the Responsive Video Action that I wrote for him and ships with the Backdraft template. You can either dig around in the code and see how you can reproduce the effect without the Action, buy the template or drop Caleb an email and ask if the Action is available separately.
Regards,
Tim.
On 24 Sep 2014, at 08:59, t50ufo wrote:
OK when I delete the size in the YouTube Code the movie seems to default to a small size. What I am trying to replicate is Caleb’s example of a responsive YouTube movie - here:
http://backdraft.onrampwebdesign.com/layouts.html
I suspect this must have something to do with the box sizing action that will not work with FW7. Is there a work around in meantime?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Hi Tim and Dave
Tim: Yes I do have Caleb’s Backdraft.
This particular use is for FW7 based on one of the responsive templates to buy. I am finding a lot of confusion between FW6 and Backdraft and FW7 in which Backdraft’s Box Sizing Action will not work (at this time). Hence this post. Thanks for taking time on this Tim.
Dave:
I have used the crowbar action on my Test FW7 page here:
http://www.trevormckay.co.uk/TestTube/
I used your example code in the crowbar action and just replaced the src= part of the target video address. I have set the % of the crowbar element to 80% and this is were we are now!
Trev
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
OK then try adding the following in Page>Html Markup in the before slot and lets see how it looks.
<style type="text/css">
#item2 {
display: block;
position: relative;
padding-bottom: 25%;
padding-top: 50px;
height: 0px;
min-height:0px;
overflow: hidden;
}
#item2 iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
</style>
D
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
OK done that: got this:
http://www.trevormckay.co.uk/TestTube/
T
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
How big do you want this video to appear on your page, full width?
Try adjusting the padding-bottom figure (in the code you just added) ie:
padding-bottom: 55%;
Play about with that a bit
D
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
No, full width would not look good.
I have used 55% padding-bottom and used 80% width and height in same markup.
Close now - juts vid is to the left.
http://www.trevormckay.co.uk/TestTube/
T
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
and used 80% width and height in same markup.
I wouldn’t change it there, instead alter the container that holds the Vid ie item2 and do it in your layout not in markup
D
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Ah! Now that has got it looking good!
http://www.trevormckay.co.uk/TestTube/
I will experiment with the settings to get a feel for how the position shows on the page. Hmm . … wish there was an action for that!
Trev
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
And now adjust your padding-bottom to 35/40%?
D
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
padding-bottom 40% here
http://www.trevormckay.co.uk/TestTube/
In the markup - correct?
What does this % apply to - is it the video depth
T
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options