- RESPONSIVE SITE DESIGNER LINK TO YOUTUBE UPDATE
- RESPONSIVE SITE DESIGNER LINK TO YOUTUBE CODE
- RESPONSIVE SITE DESIGNER LINK TO YOUTUBE DOWNLOAD
Specify postion:relative and a 50% to 60% padding-bottom for the.
RESPONSIVE SITE DESIGNER LINK TO YOUTUBE CODE
Using a little trick I picked up from John Surdakowski we can make the YouTube embed code responsive.
RESPONSIVE SITE DESIGNER LINK TO YOUTUBE DOWNLOAD
In order for this to work we’ll need to download and link to the font-awesome css file in the with The CSS Font Awesome icons are embedded using an tag with specific classes. Here I am using Font Awesome’s chevron icon for the left and right arrows. Wrap the whole thing in another div with class of “vid-list-container”.īelow the playlist code add the Left & Right arrow buttons with the following code:
Then wrap your playlist in a div with class of “vid-list”.
RESPONSIVE SITE DESIGNER LINK TO YOUTUBE UPDATE
Simply copy and paste this and update the onClick, thumbnail img src, and description for each video in your playlist. You should now have one video in your playlist with the code looking like this: The other parameters “rel”, “showinfo” and “autohide” are not necessary. Add “?autoplay=1” to ensure that the video starts playing automatically. Obviously you want to use the URL to the corresponding YouTube video. This simply looks for the iframe and sets it’s src to the specified URL. To accomplish this we add an onClick property to the “vid-item” as follows: We want the YouTube player to load and play the selected video. Jessica Hernandez & the Deltas - Dead Brains My first video has an ID of “eg6kNoJmzkY” and I want to use the first poster image so I set my img src to “”. You can get these using the URL “” followed by the video ID and the image file name. In this case I decided to use YouTube’s auto-generated poster image for the thumbnail images. These are both contained in a div with class of “vid-item”. Later we’ll use the CSS properties for both to control the layout and ensure responsiveness.Įach video in our playlist will have a thumbnail image placed inside a div with class of “thumb” and a description placed in a div with class of “desc”. We’ll wrap the iframe in a div with a class of “vid-container”. The Playerįirst we need to embed the YouTube player using the iframe embed code. We’ll also ensure it’s responsive by using percent widths and some basic media queries. Since we are using YouTube’s iframe embed code it should work on all devices and serve up either the flash or HTML5 player automatically.
The player we are building in this is based on the MyList Video Player, but instead of automatically populating with a YouTube playlist, we are manually building our own playlist of selected YouTube videos. The playlist will scroll or slide left and right on click or tap. Below the iframe we’ll add a horizontal playlist that includes a thumbnail image and title for each video. For an added example, you can visit the following and click the device icons at the top of the page for the different standard sizes.In this post we will work with an embedded YouTube video player using YouTube’s iframe embed code. If you resize your browser window, you should see the video fit this column width. As An Exampleīeing that our site is responsive, we utilize this technique.
Smart YouTube currently supports videos from YouTube, Vimeo, Metacafe, Liveleak and Facebook. From there, WordPress will automatically create the embedding code. What those options mean is that a client can find the video they want, copy the URL link, and paste it right into WordPress. Use the Embed Code Paste this embed code in your website. Click on Share > Embed > Right click and copy the HTML code. Find the video you want to use on your website. Get the YouTube Embed Code Go to Youtube. video-container īefore saving, we want to make sure we check the 2 parsing option directly below the Video Appearance block to attempt to make this as fail safe as possible for clients. You can create responsive YouTube and Facebook video embeds, using just the URL. Using some cleaned-up code, we can get the tools in place for our video container. While image usage is still up for debate, video usage can be tackled without question. Some “how to handle media” decisions need to be made when building a responsive website.