Design Question (Twitter/Video) - Front- & Back-End Development - Front- & Back-End Development - Progress Community
 Front- & Back-End Development

Design Question (Twitter/Video)

  • Design Question (Twitter/Video)
  • 4a570187-4cb5-6f77-96ac-ff0000ae3c70_site.png

    Trying to get this ESPN style layout working. We want to have a video commercial playing where the big box is. with the 2 small boxes playing images that will rotate on a video with transitions. and the bottom. We want twitter to scroll on the bottom with our live updates. This photo contains a static image of twitter that i placed on the bottom, everything else displays (but videos don't loop). Could anyone help with looping videos and twitter to display on bottom?

  • Hello Jason,

    Here's what you can do to achieve the scenario, displayed on the image:

    • You can use a rotator to rotate the sidebar images. Here are a few articles about how to create a rotator in Sitefinity and the demo of RadRotator:
    • For the Twitter feed you can use the out-of-the-box Twitter widget (under Toolbox -> Social). Here's more information on how it can be configured:
    • As for the looping of videos, this functionality is not available out-of-the-box, but you can create a custom media player control using the Telerik Silverlight Media Player. Then you should create a Silverlight based widget as described here
    <telerikMediaPlayer:RadMediaPlayer
                  CanSeek="False"       
                x:Name="mediaPlayer"                                          
                IsPlaylistVisible="False"
                IsAutoReverse="True"
                IsAutoPlaylistAdvance="False"
                   
                >
                <telerikMediaPlayer:RadMediaPlayer.Background >
                    <LinearGradientBrush EndPoint="0.5,1"
                                        StartPoint="0.5,0">
                        <GradientStop Color="#FF152865"    />
                        <GradientStop Color="#FFB4C2F0"
                                    Offset="1" />
                    </LinearGradientBrush>
                </telerikMediaPlayer:RadMediaPlayer.Background>
            </telerikMediaPlayer:RadMediaPlayer>
    The above is a sample markup for the media player and the property needed to be set in order to have the looping functionality.

    Since the above is relatively time consuming scenario you could try implementing the HTML5 video player into Sitefinity. We have a blog post with step by step guidance on how you can achieve this.

    All the best,
    Jen Peleva
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items